iPhone UIImage overlap render bug.

Question

I've come across a strange render bug on iPhone OS 3.0...

I have two images. One is a non-transparent PNG that is predominately black with a white gradient fading upward.

The second is a transparent PNG with translucent clouds.

When I overlay the two using UIImageView, the intersection of the clouds and white gradient triggers a render bug that causes a rather odd looking graphical glitch that removes all opacity from the image on top (in this case the clouds), and causes the glitched portion of the image to render on top of all layers in the current view (including ones it is technically underneath).

It only occurs at the intersection of the two portions of the images. So typically only a very small block is experiencing the error while the rest of the images render normally.

Has anyone seen this and does anyone have a fix? I want to check before I move on to Core Animation which will hopefully address the problem (since I imagine that CA or even OpenGL is more apt to handle overlapping alpha channels).

Screenshot found here:

http://www.jasconi.us/glitch.jpg

You can see the intersect of the two images at the lower right.

Answer 1

Could you please show us the reproducible code & images? To recognize the problem exactly, I'd like to reach your recognition.

Answer 2

From your description, this seems to be a bug in Apple's code. I would report it to Apple and wait for a fix.

In the meantime, you can try to implement the same functionality in Core Animation or OpenGL in the hope that the bug is in the higher-level UIImageView, but since the UIImageView itself uses Core Animation, it's possible that this bug is simply unavoidable until it's fixed.

Answer 3

I assume you're displaying them using UIImageView? If so, have you set opaque to NO on the transparent view?