问题描述
当对图像应用-webkit-filter和-webkit-transition并在悬停时更改过滤器时，图像过渡效果很好，但是图像变得非常模糊。
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.
注意：：这仅在 Retina-Displays 上发生–正常 ppi显示器完全没有问题，但例如在新的MacBook上就模糊了带有Retina显示屏的专业版。
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.
我的CSS（无供应商前缀）：
My CSS (without vendor-prefixes):
img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}
注意：要查看效果/错误，我将过渡时间设置为2秒
Note: to see the effect/bug, I've set the transition-duration to 2 Seconds
查看我的演示：
我该如何解决？
编辑： 如果我将：hover-state设置为filter：none，那就太尖锐了！ :-)但是，转换当然不再起作用了：-/
一旦图像上出现过滤器（即使该值为0或0％），该图像在视网膜显示屏上也会变得模糊（带有或没有过渡…一直都是模糊的）。我猜这是一个过滤器错误。
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.
这是WebKit中的已知错误
This is a known Bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=93471
推荐答案
我设法通过应用img标签解决了这个问题：
I managed to get around this issue by applying to the img tag:
-webkit-transform: translateZ(0);
这篇关于视网膜显示屏上的CSS过滤器：模糊图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！