Chrome Mac don't render very small PNGs very well

Question

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

You can notice white strokes around triangles.

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

Answer 1

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.