Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

iOS 6 Rendering Bug: 3D-Rotation Causes Layers to Render Without Respect for View Hierarchy

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.

Screen before animation - looks fine

ClosedFlap shows the screen before animating: looks fine

Screen showing rendering bug

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 :))