2

In Safari on iPhone/iPad, when I use two fingers to zoom webpages that have PNGs with an alpha channel, there are obvious renderings 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

forthrin
  • 2,709
  • 3
  • 28
  • 50

2 Answers2

2

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.

Martin Kleppmann
  • 1,315
  • 12
  • 9
0

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.

Kornel
  • 97,764
  • 37
  • 219
  • 309