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，它处理了类似的问题。