Alpha transparent PNGs not displaying correctly in Mobile Safari
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.
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
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.