With the release of iOS 6, we observed a curious new bug in one of our iPhone apps: after applying a 3D-rotation to a view, views beneath the rotated view were rendered out of order: that is, a view A under a rotated view B will be drawn above view B.
The following screenshots show the effect: the first image shows how the view looks before animating and the second shows the view after animating.
ClosedFlap shows the screen before animating: looks fine
OpenFlap shows the bug: check out that evil red bunny!
Notice how in the top half of the screen, the bunny and label are rendered on top of the red view. This is wrong: the red view is hierarchically on top of the bunny and label.
What to Do About It
Luckily, as you can likely guess from the images, there is a work-around: the views render themselves in the correct order if you set their zPositions. The zPositions must increase in the same order as the view hierarchy. So for the screenshots above, the code would be like this:
self.bunny.layer.zPosition = -1000;
self.label.layer.zPosition = -1000;
self.rotationBackgroundView.layer.zPosition = 1000;
self.rotationView.layer.zPosition = 1000;
If you’d like to run or read the code, here’s the project that generated those images. Run it on iOS 6 to see the bug: LayeringBug
We will have to wait for word from Apple as to whether this is actually a bug, or whether it’s desired behaviour and we used an incorrect implementation. In the meantime, you can work around the problem by setting zPositions on layers. You can also keep an eye on the bug on Open Radar.
(Thanks to Brian Croom for your ninja debugging skills and for helping find a work-around :))
About the Author
