Alpha transparent PNGs not displaying correctly in Mobile Safari

Posted by worksology on Stack Overflow See other posts from Stack Overflow or by worksology
Published on 2009-09-03T16:46:25Z Indexed on 2010/04/19 4:53 UTC
Read the original article Hit count: 464

Filed under:

png

|

mobilesafari

|

transparency

|

iphone

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.)

© Stack Overflow or respective owner

Related posts about png

Bulk convert PNG-24 to PNG-8 files with best quality

as seen on Super User - Search for 'Super User'
Hi, Can anybody recommend a good method of bulk converting a large amount of PNG-24 files to PNG-8 with as little loss of quality as possible and maintaining transparency? I've tried ImageMagick but the resulting images weren't quite as crisp quality as I'd like. Using Paint.NET I was able to achieve… >>> More
Azure Mobile Services: what files does it consist of?

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
Azure Mobile Services is a platform that provides a small set of functionality consisting of authentication, custom data tables, custom API’s, scheduling scripts and push notifications to be used as the back-end of a mobile application or if you want, any application or web site. As described in my… >>> More
how to rename files with count

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
i have a directory like this: randomized_quad015.png randomized_quad030.png randomized_quad045.png randomized_quad060.png randomized_quad075.png randomized_quad090.png randomized_quad1005.png randomized_quad1020.png randomized_quad1035.png randomized_quad1050.png randomized_quad105.png randomized_quad1065… >>> More
How can I center XHTML content with CSS?

as seen on Stack Overflow - Search for 'Stack Overflow'
so I recently converted a website of mine from a table content format to a div content format. Table format Version: Table version of the website: here. Table version style CSS: body { width: 1020px; margin: 0 auto; background-image: url(images/bg.png); } .logo{ width:301px; … >>> More
Images in the project NOT adding to array - don't know why.

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there, I have to sets of images. Each set has 16 images. One set is called 0.png through to 15.png the other is a0.png through to a15.png. In my app, it loads each one dependent on a variable (which by logging, I have proved it works) here is the code [MemoryManager sharedMemoryManager]; NSLog(@"THEME:… >>> More

Related posts about mobilesafari

Reordering items in mobilesafari

as seen on Stack Overflow - Search for 'Stack Overflow'
After searching around i still have no clue about the best practice to reorder a set of items in mobile safari. I'm currently using, in the desktop version of my webapplication, jQuery sortable function applied to a set of table rows, with an ajax callback to update items positioning. What would… >>> More
Why doesn't border-radius work properly on text inputs in MobileSafari?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is a reference HTML document: <!DOCTYPE html> <html> <head> <style> body { background-color: #000; } input { -webkit-border-radius: 20px; } </style> </head> <body> <input type="text" value="text" /> </body> </html> The… >>> More
Free up memory in MobileSafari (iPhone/iPad) from cached images.

as seen on Stack Overflow - Search for 'Stack Overflow'
The iPad stops loading large images after about 8 or 9 images for me, since the page runs into its allocated memory limits. Since I'm showing these images one at a time, I'd like to remove the old ones from the browser cache so I don't hit the limit. Any ideas on how to do this in javascript? >>> More
Does the iPhone has AJAX and jQuery support?

as seen on Stack Overflow - Search for 'Stack Overflow'
Does the iPhone has AJAX and jQuery support? I am developing a chatbox for iPhone with these two. Are they supported on MobileSafari? >>> More
Alpha transparent PNGs not displaying correctly in Mobile Safari

as seen on Stack Overflow - Search for 'Stack Overflow'
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… >>> More