视网膜显示的CSS滤镜:模糊图像

Question

当您将-webkit-filter和-webkit-transition应用于Image并在悬停时更改过滤器时,图像过渡效果很好,但随后图像变得非常模糊.

注意:这只发生在Retina-Displays上 - 对于'普通'ppi 显示没有任何问题,但是模糊不清,例如带有Retina显示屏的新MacBook Pro.

我的CSS(没有供应商前缀):

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}?

注意:要查看效果/错误,我已将转换持续时间设置为2秒

看看我的演示:http://jsfiddle.net/dya2t/7/

我怎样才能解决这个问题？

编辑:如果我设置:悬停状态过滤:没有它的尖锐!:-)但是当然转换不再起作用了: - /一旦图像上有过滤器(即使值为0或0%),图像在视网膜显示器上变得模糊(有或没有过渡......它一直都很模糊.我猜这是一个Filter-Bug.

---

这是WebKit中的已知错误https://bugs.webkit.org/show_bug.cgi?id=93471

Answer 1

我设法通过应用img标记来解决这个问题:

-webkit-transform: translateZ(0); 

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