Q:

CSS Filter on Retina Display: Fuzzy Images

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

A:

I managed to get around this issue by applying to the img tag:
-webkit-transform: translateZ(0); 

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

A:

Child elements with -webkit-backface-visibility: hidden; will resolve this.
http://codepen.io/amboy00/pen/Bxbrd

