NEW 71624
3+ nested elements with -webkit-transform-style:preserve-3d cause display errors 
https://bugs.webkit.org/show_bug.cgi?id=71624
Summary 3+ nested elements with -webkit-transform-style:preserve-3d cause display errors
Maxwell Terpstra
Reported 2011-11-06 02:52:35 PST
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).
Attachments
test case (3.14 KB, text/html)
2011-11-06 02:52 PST, Maxwell Terpstra 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jakub R Pawlowski
Comment 2 2018-02-05 17:07:35 PST
This still has not been fixed: https://stackoverflow.com/questions/48616695/css3d-overlapping-divs-on-mobile-safari
Maxwell Terpstra
Comment 3 2018-02-05 17:35:05 PST
Note that the "relevant" Chromium issue 89955 mentioned above has been fixed in both Blink and Webkit, but this issue persists.
Note You need to log in before you can comment on or make changes to this bug.