CSS Filter on Retina Display: Fuzzy Images

Question

When you apply a -webkit-filter and a -webkit-transition to an Image and change the filter on hover, the image transition does well, but then the image gets really fuzzy.

Note: This only happens on Retina-Displays — no problem at all with 'normal' ppi-displays, but fuzzy on for example a new MacBook Pro with Retina Display.

My CSS (without vendor-prefixes):

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

Note: to see the effect/bug, I've set the transition-duration to 2 Seconds

Check out my Demo: http://jsfiddle.net/dya2t/7/

How can I fix this?

EDIT: If I set the :hover-state to filter:none its sharp! :-) BUT of course the transition does not work anymore :-/ As soon as there is a filter on an image (even if the value is 0 or 0%), the image gets fuzzy on retina displays (with or without transitions … its just blurry, all the time). I guess this is a Filter-Bug.

---

This is a known Bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=93471

Answer 1

I managed to get around this issue by applying to the img tag:

-webkit-transform: translateZ(0); 

http://jsfiddle.net/78qbn/3/

Answer 2

Child elements with -webkit-backface-visibility: hidden; will resolve this.

http://codepen.io/amboy00/pen/Bxbrd