css - Chrome Mac 不能很好地渲染非常小的 PNG

Question

我从 Photoshop CS6 导出了 PNG-24，它在 Chrome 中看起来像这样。

您可以注意到三角形周围的白色笔触。

相同的 PNG 在其他浏览器中正确呈现。在firefox中渲染是这样的。

Answer 1

我有这个完全相同的问题。似乎当对比度很小时，Chrome 会尝试“解决问题”。

咬牙切齿之后，我发现添加：

    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */

到问题元素的 css 解决了问题。

另外，请参阅这篇文章：https ://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in处理类似问题。