当您将-webkit -filter和-webkit -transition应用于图像并更改悬停的滤波器时，图像过渡确实很好，但是图像确实变得模糊。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
注意：这仅在 netina-displays - 与'normal''ppi-displays完全没有问题，但在例如带有视网膜的新的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％），图像在视网膜显示器上（有或没有过渡的情况下……它一直都模糊，一直存在）。我想这是一个过滤器。
这是Webkit中的一个已知错误
我通过应用于IMG标签来解决这个问题：
-webkit-transform: translateZ(0);
http://jsfiddle.net/78qbn/3/
带有-webkit-backface-visibility的子元素：隐藏；将解决这个问题。
http://codepen.io/amboy00/pen/bxbrd
加入Stackoverflow，让他人知道，因为我必须自己找到这个：尝试在Chrome中打印图像时（但以不同的方式）也表现出（但有所不同）。他们转动超级像素化！
如果您将-webkit-filter扔到Chrome中的PNG上，无论打印机或打印设置如何，它都会以正确的尺寸打印图像/s，但被降低到70 dpi以下。在打印预览中也可见。
-webkit-transform: translateZ(0);修复了它。
Meatspace Repro：与＆amp;没有修复