Search code examples
cssgoogle-chromepng-24image-rendering

Chrome Mac don't render very small PNGs very well

I have PNG-24 exported from Photoshop CS6 and it looks like this in Chrome.

enter image description here

You can notice white strokes around triangles.

Same PNG renders correctly in other browsers. Rendering in firefox is like this.

enter image description here

Solution

  • I am having this exact same problem. Seems like when there is very little contrast, Chrome tries to "solve the problem".

    After much gnashing of teeth, I found that adding:

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

    to the problem element's css solved the problem.

    Also, see this post: https://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in which deals with a similar problem.