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