css - 视网膜显示屏上的 CSS 过滤器：模糊图像

Question

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

注意：这只发生在Retina 显示屏上——“普通”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%），图像在视网膜显示器上就会变得模糊（有或没有过渡......它只是模糊，一直）。我想这是一个过滤器错误。

score 38 · Accepted Answer

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

-webkit-transform: translateZ(0);

score 4 · Accepted Answer

带有 -webkit-backface-visibility 的子元素：隐藏；将解决这个问题。

score 0 · Accepted Answer

加入 stackoverflow 让其他人知道，因为我必须自己发现这一点：当尝试在 chrome 中打印图像时，这个错误也会出现（但不同）。他们变得超级像素化！

如果-webkit-filter无论打印机或打印设置如何，您都将 a 扔到 chrome 中的 PNG 上，它会以正确的尺寸打印图像，但会下采样到 70 dpi 以下。它在打印预览中也可见。

-webkit-transform: translateZ(0);解决它。

3 回答 3