Cuando se aplica un filtro -webkit y una transición -webkit a una imagen y se cambia el filtro al pasar el mouse, la transición de la imagen funciona bien, pero la imagen se vuelve borrosa.

Nota: Esto solo pasa enRetina-Displays - no hay problema en absoluto con las pantallas ppi 'normales', pero está borrosa, por ejemplo, una nueva MacBook Pro con pantalla Retina.

Mi CSS (sin prefijos de proveedor):

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

Nota: para ver el efecto / error, he establecido la duración de transición en 2 segundos

Echa un vistazo a mi Demo:http://jsfiddle.net/dya2t/7/

¿Cómo puedo arreglar esto?

EDITAR: Si configuro: hover-state para filtrar: ninguno es nítido! :-) PERO, por supuesto, la transición ya no funciona: - / Tan pronto como hay un filtro en una imagen (incluso si el valor es 0 o 0%), la imagen se ve borrosa en las pantallas de retina (con o sin transiciones ... Es solo borroso, todo el tiempo). Supongo que esto es un error de filtro.

Este es un error conocido en WebKithttps://bugs.webkit.org/show_bug.cgi?id=93471