Maybe this is a common issue, but Google and the forum search have come up with nothing helpful for any of the search term combinations I tried.
The problem is thus: If I have a background PNG with an alpha transparency channel that is nothing but a partially opaque white square with a transparency gradient, at certain levels of zoom on the iOS Safari browser the image displays some weird banding artifacts--grey stripes.
What it looks like is that the image is being dithered, and at some zoom levels the dithering is causing interference patterns that show up as grey stripes.
Sample: http://animeworld.com/reviews/blacklion.html
On that site, I have a large, white, semi-opaque, non-repeating square in the center DIV positioned such that it does not overlap the blue stripe at the top, but does partly overlap the flavor image down the lefthand column. I did this so that flavor images that would stick out far enough to the right to underlap the text on narrower windows would be partially obscured, making the overlaid text easier to read.
The layout defaults to a mobile version on iOS devices, so you'll need to switch to the "Full" layout with the link at the top to see what I'm talking about.
This works exactly as expected on any desktop browser I can find. It also works fine on iOS devices at certain zoom levels (close to 1:1, I think).
However, depending on the zoom level, you get the weird grey banding; I've only got a couple of devices to test on (iPod Touch 3G and iPad), but both show it, and did under both iPhone OS 3 and iOS 4.
I can probably come up with another way to do what I'm trying to do, but that doesn't explain where this glitch is coming from--is there something wrong with my PNG, or is this an iOS Safari bug?
The problem is thus: If I have a background PNG with an alpha transparency channel that is nothing but a partially opaque white square with a transparency gradient, at certain levels of zoom on the iOS Safari browser the image displays some weird banding artifacts--grey stripes.
What it looks like is that the image is being dithered, and at some zoom levels the dithering is causing interference patterns that show up as grey stripes.
Sample: http://animeworld.com/reviews/blacklion.html
On that site, I have a large, white, semi-opaque, non-repeating square in the center DIV positioned such that it does not overlap the blue stripe at the top, but does partly overlap the flavor image down the lefthand column. I did this so that flavor images that would stick out far enough to the right to underlap the text on narrower windows would be partially obscured, making the overlaid text easier to read.
The layout defaults to a mobile version on iOS devices, so you'll need to switch to the "Full" layout with the link at the top to see what I'm talking about.
This works exactly as expected on any desktop browser I can find. It also works fine on iOS devices at certain zoom levels (close to 1:1, I think).
However, depending on the zoom level, you get the weird grey banding; I've only got a couple of devices to test on (iPod Touch 3G and iPad), but both show it, and did under both iPhone OS 3 and iOS 4.
I can probably come up with another way to do what I'm trying to do, but that doesn't explain where this glitch is coming from--is there something wrong with my PNG, or is this an iOS Safari bug?