Wenn Sie einen -webkit-Filter und einen -webkit-Übergang auf ein Bild anwenden und den Filter beim Schweben ändern, funktioniert der Bildübergang gut, aber dann wird das Bild wirklich unscharf.

Hinweis: Dies geschieht nur amRetina-Displays - Kein Problem mit "normalen" ppi-Displays, aber unscharf zum Beispiel auf einem neuen MacBook Pro mit Retina-Display.

Mein CSS (ohne Herstellerpräfixe):

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}​

Hinweis: Um den Effekt / Bug zu sehen, habe ich die Übergangsdauer auf 2 Sekunden eingestellt

Schauen Sie sich meine Demo an:http://jsfiddle.net/dya2t/7/

Wie kann ich das beheben?

BEARBEITEN: Wenn ich den Schwebezustand auf Filter setze: keiner ist scharf! :-) ABER natürlich funktioniert die Überblendung nicht mehr: - / Sobald es einen Filter für ein Bild gibt (auch wenn der Wert 0 oder 0% ist), wird das Bild auf Retina-Displays unscharf (mit oder ohne Überblendungen… es ist nur verschwommen, die ganze Zeit). Ich denke das ist ein Filter-Bug.

Dies ist ein bekannter Fehler in WebKithttps://bugs.webkit.org/show_bug.cgi?id=93471