: Why does Chrome distort my transparent PNG (adding a subtle inset "weak" area)? I'm having a hard time describing the issue in words, so haven't had any luck searching. I have a simple repeating
I'm having a hard time describing the issue in words, so haven't had any luck searching. I have a simple repeating pattern (though I've had the same trouble with other images; it doesn't seem to be related to the complexity or color depth), and when I save it as a transparent PNG, using it in Chrome shows a kind of ghosted artifacting.
The image: i.imgur.com/gxuCNDd.png
A screenshot of what I'm seeing (at Retina resolution [edit: based on the answers, the Retina display is my core issue]): www.dropbox.com/s/a44j8uih9c3q4e4/Screenshot%202014-01-13%2020.18.06.png
The image should have solid-looking lines.
What I've tried:
Saving it as an 8-bit PNG with Alpha Transparency in Fireworks CS6
Saving it as a 32-bit PNG with Alpha Transparency in Fireworks CS6
Saving it as a 24-bit PNG with Alpha Transparency in Photoshop CS6
The issue appears in each of these versions, but not in Firefox or Safari (all browsers are their respective latest versions on Mac OS X 10.9.1), hence my assumption that it's some interaction between Chrome and the transparent PNG. I'm looking at just the image directly, not on a web page.
Saving the image on a background (with no transparency) makes the issue disappear, but isn't a viable option (and neither is saving with Index Transparency), because it's going on a web page with a variable background.
My question is two-fold:
Do you see this issue? (I.e. is it just some weird setting on my computer somewhere?)
Any idea what's causing it?
More posts by @Kaufman565
2 Comments
Sorted by latest first Latest Oldest Best
Late answer but this works:
/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
developer.mozilla.org/en/docs/Web/CSS/image-rendering
Here is another link as well which talks about browser support:
css-tricks.com/almanac/properties/i/image-rendering/
If I understand your question correctly, you are asking why your image, on a Retina display, looks a little blurry.
If that's the question, the answer is due to the retina display having to scale your image up 2x. The fix for this would be to:
create a separate png for retina displays at twice the horizontal and vertical dimension. Then use media queries to deliver the right image to the right screen: weedygarden.net/2010/10/retina-display-and-css-background-images/
or
use a vector format (SVG), which can scale without loss of resolution. This works great on new webkit browsers and the like. It may not work on older browsers (cough IE cough)
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2025 All Rights reserved.