Verlaufsstreifen in Chrome

Ich habe versucht, CSS mit linearem Farbverlauf zu verwenden, um die Verwendung eines Bilds für einen Farbverlauf zu vermeiden, aber leider wird es in Chrome mit sichtbaren Streifen schlecht dargestellt.

Ich habe ein Codepen-Beispiel erstellt, um das Problem zu veranschaulichen.

http://codepen.io/chrism/pen/1

Es ist seltsam, weil es perfekt in Safari, einem anderen Webkit-basierten Browser, gerendert wird.

Der CSS-Code stammt aus Kompassbildern. Denken Sie also nicht, dass dies ein Problem mit meinem CSS ist

Ich habe im Chrome Issue Tracker dieses Ticket gefunden, das sich meiner Meinung nach auf dieses Problem bezieht.

http://code.google.com/p/chromium/issues/detail?id=41756

Ich habe mich gefragt, ob jemand dafür Problemumgehungen hat, bei denen keine Bilder verwendet werden.

Vielen Dank!

— Chris
quelle

Nee. Es gibt keine Problemumgehung. Es ist die Render-Engine von Chrome. Sie können nichts tun, um Bilder zu verwenden oder darauf zu warten, dass Google die Render-Engine verbessert.

— Scott

Der Unterschied, den Sie sehen, ist Dithering. Safari weist Farbverläufe auf, Chrome nicht. Ich glaube nicht, dass es eine Möglichkeit gibt, Dithering für beide zu aktivieren oder zu deaktivieren.

Dithering ist eine absichtlich angewendete Form von Rauschen, die zur Randomisierung von Quantisierungsfehlern verwendet wird, um großräumige Muster wie Farbstreifen in Bildern zu verhindern.

http://en.wikipedia.org/wiki/Dither

Leider bedeutet dies, dass Sie möglicherweise Bilder verwenden müssen. Wenn Sie noch ein sich wiederholendes Bild für einen Gradienten verwenden entscheiden, stellen Sie sicher , dass Sie genügend Breite oder Höhe für die Dithering zur Arbeit verlassen. Normalerweise benötigt Dithering etwa 10 bis 20 Pixel, um nicht wiederholt auszusehen.

— Marc Edwards
quelle

Hallo Marc, danke für die Antwort. Ja, ich verstehe, dass der glattere Farbverlauf auf das Dithering zurückzuführen ist. Ich hatte nur gehofft, dass jemand einen Weg kennt , um Chrom dazu zu bringen, Farbverläufe mit CSS oder Javascript irgendwie zu zittern. Ich werde stattdessen ein Bild verwenden, hatte aber (aus verschiedenen Gründen) nicht gehofft. Nochmals vielen Dank für Ihren Rat und ich freue mich über Ihren iterativen Podcast!

— Chris

Ja, es wäre großartig, wenn -webkit-gradient-dither: on; existierte. Und danke: D

— Marc Edwards

Nicht die gleiche und wahrscheinlich weitaus schlechtere Leistung, aber was ist mit einer subtilen Rauschtextur über einem CSS-gezeichneten Farbverlauf? Eine kleinere Rauschtextur könnte wahrscheinlich für alle Ihre Farbverläufe verwendet werden. Nicht identisch mit Dither-Verläufen, aber vielleicht besser als kein Dithering?

— Marc Edwards

Es ist lustig, dass Sie das sagen, weil es das erste war, was ich versucht habe - ein transparentes Hintergrundbild mit Rauschen darüber hinzuzufügen ... obwohl es definitiv geholfen hat, ist es leider nicht genug, um die Streifenbildung selbst bei ziemlich starkem Rauschen ausreichend zu verschleiern (zu viel für den Effekt will ich sowieso). Ich hätte gerne Bilder gepostet, um dies zu veranschaulichen, aber ich brauche noch ein paar Punkte, bevor ich darf. Nochmals vielen Dank für Ihren Vorschlag, es freut mich, dass ich alle Möglichkeiten in Betracht gezogen habe, bevor ich auf ein Bild zurückgegriffen habe :)

— Chris

Ah ok. Schön, dass du es versucht hast. Ich habe die Frage abgelehnt, also gibt Ihnen das hoffentlich noch ein paar Punkte, um Bilder posten zu können.

— Marc Edwards

Ich stelle fest, wenn Sie das Element, das Ihren Farbverlauf enthält, mit der GPU transform:translateZ(0)rendern, wird es glatter, nicht perfekt, aber glatter.

— Sirkan
quelle