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

September 26, 2012 Michelle Den Hollander

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

About the Author


The Visualized Conference Brings Big Data to Light
The Visualized Conference Brings Big Data to Light

Big Data doesn’t only create new opportunities for enterprises and organizations; it opens up new horizons ...

JB Steadman – How to Make Your Objects Selfish, Lazy, and Ignorant in One Easy Step
JB Steadman – How to Make Your Objects Selfish, Lazy, and Ignorant in One Easy Step

… Read more

SpringOne 2022

Register Now