Quando você aplica um filtro -webkit e uma transição -webkit a uma imagem e altera o filtro ao passar o mouse, a transição da imagem se dá bem, mas a imagem fica realmente confusa.

Nota: Isso só acontece emRetina-exibe - Sem problemas com os ecrãs ppi 'normais', mas por exemplo um novo MacBook Pro com ecrã Retina.

Meu CSS (sem prefixos de fornecedor):

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

Nota: para ver o efeito / bug, defini a duração da transição para 2 segundos

Confira minha demonstração:http://jsfiddle.net/dya2t/7/

Como posso consertar isso?

EDITAR: Se eu definir o estado: hover-state para filtrar: none its sharp! :-) MAS, é claro, a transição não funciona mais: - / Assim que houver um filtro em uma imagem (mesmo se o valor for 0 ou 0%), a imagem ficará difusa em exibições de retina (com ou sem transições… é apenas embaçado, o tempo todo). Eu acho que isso é um Bug de filtro.

Este é um bug conhecido no WebKithttps://bugs.webkit.org/show_bug.cgi?id=93471