Vertical stripes on alpha channel PNGs when scaling in Safari on iPhone/iPad

In Safari on iPhone/iPad, when I use two fingers to zoom webpages that have PNGs with an alpha channel, there are obvious rendering开发者_运维技巧s errors (vertical stripes) at certain zoom levels.

Does anyone know workarounds for this?

Original: http://i56.tinypic.com/2m47o8n.png

Scaled: http://i56.tinypic.com/2v3q6mo.png

This seems to be a sampling artifact which occurs when the image is scaled just slightly up (when its rendered dimensions on the device are slightly larger than the original image's dimensions). Presumably a bug in the rendering engine.

A workaround is to remove the alpha channel from the image (it's not sufficient for all your pixels to be opaque; it actually has to be a PNG without alpha channel). I've not yet been able to find a workaround which preserves transparency.

That's a Safari bug exposed by grayscale PNG format. You can avoid it by converting the image to paletted or 24-bit RGB.

I haven't seen this bug for a while, so I think it has been fixed in current iOS versions.