当您将-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/
我该如何解决这个问题？
编辑：如果我将：hover-state设置为filter：none，它的尖锐！ :-)但当然转换不再有效： - / 一旦图像上有过滤器（即使值为0或0％），图像在视网膜显示器上变得模糊（有或没有过渡......它只是模糊，一直）。我想这是一个Filter-Bug。
答案 0 :(得分：38)
答案 1 :(得分：4)
带-webkit-backface-visibility：hidden的子元素;将解决这个问题。
答案 2 :(得分：0)
加入stackoverflow让其他人知道，因为我必须自己找到它： 当尝试在chrome中打印图像时，此错误也会显示（但不同）。他们变成超级像素化！
如果无论打印机或打印设置如何，都将-webkit-filter投射到镀铬的PNG上，它会以正确的尺寸打印图像，但会下采样到70 dpi以下。它在打印预览中也可见。
-webkit-transform: translateZ(0);修复了它。
Meatspace repro：prints of same stack of PNGs with & without fix
