CSS Filter on Retina Display: Fuzzy Images

14
votes

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

3
cssfiltercss-transitionsretina-display
you can chain filters like this: 'filter: grayscale(0.5) blur(1px) saturate(2);' etc.. : jsfiddle.net/meo/dya2t/9 but i don't know if this fixes your problem i don't have a retina screen - meo
@meo: chaining filters unfortunately aren't helping, thx anyway - albuvee
In your fiddle the saturation filter simply overrides the grayscale one. You should get rid of the saturation one. It won't solve the sharpness issue, but at least your filter will work :) - robertp
I already filed a bug for this issue: bugs.webkit.org/show_bug.cgi?id=93471 - Erik Aigner
When I try the demo with the added saturation filter, it simply can't see the transition. It just 0-1 with no transition in 2s, which is weird. - robertp

3 Answers

39
votes

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

-webkit-transform: translateZ(0);

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

4
votes

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

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

0
votes

Joined stackoverflow to let others know since I had to find this out myself: this bug also manifests (but differently) when trying to print images in chrome. They turn super pixelated!

If you throw a -webkit-filter onto a PNG in chrome regardless of printer or print settings, it prints the image/s at the right size, but downsampled to under 70 dpi. It's visible in the print preview too.

-webkit-transform: translateZ(0); fixed it.

Meatspace repro: prints of same stack of PNGs with & without fix