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…

Accepted Answer

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

```
-webkit-transform: translateZ(0); 
```

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

CSS Filter on Retina Display: Fuzzy Images

Solution

Problem