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\

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

Use an image with any dimensions other than 1x1.

(Abbreviated response for those who have stuff to do)

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.