问题
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
回答1:
I managed to get around this issue by applying to the img tag:
-webkit-transform: translateZ(0);
http://jsfiddle.net/78qbn/3/
回答2:
Child elements with -webkit-backface-visibility: hidden; will resolve this.
http://codepen.io/amboy00/pen/Bxbrd
回答3:
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
来源：https://stackoverflow.com/questions/13347947/css-filter-on-retina-display-fuzzy-images