Kiedy zastosujesz filtr -webkit-i przejście -webkit do obrazu i zmienisz filtr na zawisie, przejście obrazu ma się dobrze, ale wtedy obraz staje się naprawdę zamazany.

Uwaga: To się dzieje tylko naWyświetlacze siatkówki - nie ma problemu z „normalnymi” wyświetlaczami ppi, ale niewyraźne na przykład w nowym MacBooku Pro z wyświetlaczem Retina.

Mój CSS (bez prefiksów dostawcy):

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

Uwaga: aby zobaczyć efekt / błąd, ustawiłem czas trwania przejścia na 2 sekundy

Sprawdź moje Demo:http://jsfiddle.net/dya2t/7/

Jak mogę to naprawić?

EDYTOWAĆ: Jeśli ustawię stan: hover-state na filtr: brak jego ostrości! :-) ALE oczywiście przejście już nie działa: - / Jak tylko pojawi się filtr na obrazie (nawet jeśli wartość wynosi 0 lub 0%), obraz staje się niewyraźny na wyświetlaczach siatkówki (z przejściami lub bez… cały czas jest niewyraźny). Myślę, że to Bug-Filtr.

Jest to znany błąd w WebKithttps://bugs.webkit.org/show_bug.cgi?id=93471