iOS scaling causes banding on PNGs with alpha channel

Discussion in 'Web Design and Development' started by Makosuke, Sep 21, 2010.

  1. Makosuke macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    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.


    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?
  2. redesigned macrumors newbie

    Aug 11, 2011
    did you ever find a solution to this issue?

    we are having the same issue on ipads and iphones with certain png files...banding at certain zoom levels.

    also odd 40px padding on divs on one site, only at a certain zoom level, fine at all other lesser and greater zoom levels.

    i was able to work around the padding bug in ios with a custom targeted stylesheet...lame but a fix nonetheless.

    the png banding issue has me stumped though.
    any help would be greatly appreciated.

  3. Makosuke thread starter macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    No, I never did figure this out, and it continues to bug me every time I look at the site on an iPad (but obviously not quite so much that I've actually figured out a workaround or another way to get the effect I want). I have never had any trouble with other rendering or padding, though.

    I'm actually a little surprised that I hadn't heart about the issue anywhere else, since it seems like fancier sites would run into it at least on occasion.

Share This Page