Margin & Float Pixelate Linear Verlauf (Chrome Bug?)

In der folgenden Geige sieht der Block gut aus, wenn Sie die Margin/Float-Eigenschaften des CSS auskommentieren.Margin & Float Pixelate Linear Verlauf (Chrome Bug?)

Warum ist die Steigung dort mit ihnen durcheinander?

Mit „Messed up“ Ich meine (man beachte die Linien sind nicht glatt):

(Bitte versuchen Sie nicht, es in einer Vermeidung des Problems zu beheben, ich weiß, wie das zu tun, und das ist, nicht der Sinn dieser Frage.)

Fiddle

.rec { 
    margin: 10px; 
    float: left; 
    height: 50px; 
    width: 50px; 
    background: linear-gradient(135deg, rgb(134, 108, 83) 0%, rgb(134, 108, 83) 12.5%, rgb(127, 107, 86) 12.5%, rgb(127, 107, 86) 25%, rgb(228, 175, 104) 25%, rgb(228, 175, 104) 37.5%, rgb(254, 221, 139) 37.5%, rgb(254, 221, 139) 50%, rgb(48, 44, 43) 50%, rgb(48, 44, 43) 62.5%, rgb(237, 232, 226) 62.5%, rgb(237, 232, 226) 75%, rgb(200, 193, 192) 75%, rgb(200, 193, 192) 87.5%, rgb(157, 151, 151) 87.5%, rgb(157, 151, 151) 100%); 
}

ich auf Chrome diesen Test mache 48.0.2564.116 (64-Bit)

Update:

Wie Lester wies darauf hin, -webkit-backface-visibility: hidden; behebt diese. Stellt sich heraus, dass -webkit-transform: translate3D(0,0,0); dies auch behebt. Vielleicht wird irgendein Adressierungsbefehl -webkit aus irgendeinem Grund den Trick machen.

Noch bleibt die ursprüngliche Frage unbeantwortet, aber mit dem Zusatz dieses Puzzles.

Quelle

2016-03-03 Omri Aharon

Ich sehe lösen keinen Unterschied in der Steigung, wenn ich diese beiden Eigenschaften zu entfernen. – sma

@Harry Ja, einen Moment. –

@sma Aktualisiert, ist das klarer? –

-webkit-backface-visibility: hidden;

das Problem in Chrom, weil in anderen Browser Dies kann der Aliasing funktioniert

Quelle

2016-03-03 14:58:08

Alles klar, es scheint, das ist behoben, aber warum? Verchromt die Rückseite und die Vorderseite des Elements? Ist Chrome ein Bug selbst? Danke :) –

Nun, ich weiß nicht in einer 100% aber der Grund kann sein, dass ein Gradient (mathematisch gesprochen) manchmal nicht flach ist, und dies kann zu einer Art von 3D-Schichten führen, so dass Browser es nicht wiedergeben Nun, es ist wichtig, dass sie "flach gemacht" werden, um diese unordentlichen Kanten zu vermeiden, so dass die Rückseite diese verstecken :) –

Es macht Sinn. Gehirn Notiz für die Zukunft :) –

Margin & Float Pixelate Linear Verlauf (Chrome Bug?)

Antwort

Verwandte Themen