Created attachment 113781 [details] test case When three or more 3D transformed elements with the -webkit-transform-style property set to preserve-3d are nested inside one another, webkit seems to get confused about their z-ordering. The end result is that some parts that should be visible are not, and others that should be obscured are visible! The deeper the nesting, the worse it gets. All elements up to the first flat ancestor are effected, even those that are not inside the deep nesting. The attached test case shows two similar 3d figures. The one on the left has 3 levels of nesting, and the one on the right has only 2, but up to the 2nd level of nesting they are identical. Only the one on the left shows the error. The z-ordering is only incorrect when the figure is viewed from certain angles, at most others it displays correctly. The initial orientation of the figures in the test case should show the display error. However, I have added a toggle control to animate the figures so that the effect of different viewing angles can be seen. I have also added a toggle which increases the level of nesting within the left-hand figure to 6. Notice in particular that the blue surface (which is not within the deeply-nested hierarchy) flickers much more frequently while animating when more levels of nesting are added. This bug exists in the current webkit nightly (r98912), as well as the shipping version of Safari (5.1.1). I have not tested it on anything other than my home machine (Intel, Mac OS 10.7, ATI Radeon HD 2600 Pro).
Relevant Chromium issues: http://code.google.com/p/chromium/issues/detail?id=89955 http://code.google.com/p/chromium/issues/detail?id=92720
This still has not been fixed: https://stackoverflow.com/questions/48616695/css3d-overlapping-divs-on-mobile-safari
Note that the "relevant" Chromium issue 89955 mentioned above has been fixed in both Blink and Webkit, but this issue persists.