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