Bug 71624 – 3+ nested elements with -webkit-transform-style:preserve-3d cause display errors

• Component: Layout and Rendering
• Status: NEW

[Maxwell Terpstra]

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

[Jarred Nicholls]

Relevant Chromium issues:

http://code.google.com/p/chromium/issues/detail?id=89955
http://code.google.com/p/chromium/issues/detail?id=92720

[Jakub R Pawlowski]

This still has not been fixed:
https://stackoverflow.com/questions/48616695/css3d-overlapping-divs-on-mobile-safari

[Maxwell Terpstra]

Note that the "relevant" Chromium issue 89955 mentioned above has been fixed in both Blink and Webkit, but this issue persists.