Alpha transparent PNGs not displaying correctly in Mobile Safari

Question

I'm using some semi-transparent PNGs as background-images on various websites. These are usually something like a 1x1 image with a 30-percent opaque white layer.

I've noticed that Mobile Safari does not display them correctly, giving them a darker/grayish tint.

I've created a couple test pages to illustrate. View them both in your normal browser, and then on Mobile Safari, and you should see what I mean.

• This shows 11 red images of varying opacities on white: http://thecompleteworks.org/alpha-tests/index-red.html
• This shows 11 white images of varying opacities on blue: http://thecompleteworks.org/alpha-tests/index.html

Is this a MobileSafari bug (I couldn't imagine so), or do I need to do something different, either to my pages or PNGs?

(Here's how I create the PNGs: In Photoshop, create a 1x1 transparent canvas. Draw a white rectangle in Layer 1. Set opacity to, say 30 percent, Save for Web as 24-bit PNG with transparency.)

Answer 1

After viewing the sites on both devices (my Mac and my iPod Touch), I think what you're seeing here is a difference in what colors the screens can produce rather than a bug in either rendering engine. There are many factors that can go into this kind of difference, e.g., the contrast in the portable display might not be as great in an effort to conserve power, make the device cheaper, etc.

Answer 2

This is really more a web design question than a programming one, how about asking on Doctype

Answer 3

I was trying to do some simple DIV backgrounds using a 1 pixel PNG with partial transparency to make a translucent box for some text above a background picture. It looked great in all kinds of browsers, until I tried the iPhone. It was doing the partial transparency, but with this odd greyish shade you speak of instead of the expected results.

I then tried those linked red & blue tests. They both looked fine the first time I viewed them, then hitting refresh caused them to go greyish! I tried again with a new browser window and it was back to looking proper, ahh the inconsistency you mentioned strikes again. Well then I just phyiscally rotated the iPhone, and as it went from landscape to portrait mode the colors shifted to the greyish versions!

All the W3C PNG partial transparency tests looked perfect on the iPhone. It did, however, fail the Gamma test. After ruling out the gamma as a possible cause I hunted this one down for hours, but got nowhere. I even made a gradient of my own that went all the way from 0 to 100% transparent to make sure it wasn't my process of creating the image. Sure enough, that worked perfectly, so my process is good.

Then I had this stroke of genius, what if the file were larger than 1 pixel? So I made it 2 pixels wide, and 1 pixel high, 20% transparent (alpha of 80%). Bam..it worked! I tried all kinds of combinations of 1x1, 1x2, 2x1, 2x2, 8x8. All of them worked properly except for the single pixel version.

I went back and checked the above linked tests, and see that they use 1 pixel images for all the shades. Ah ha!

And there you have it, Mobile Safari needs at least 2 pixels to work with for semi-transparent PNG files. I win, now where's my prize?