61824 2011-05-31 17:33:52 -0700 transform-style:flat should draw in document order 2023-06-02 10:40:11 -0700 1 1 1 Unclassified WebKit WebCore Misc. 528+ (Nightly build) Unspecified Unspecified NEW https://jsfiddle.net/nq2beh8d/ P2 Normal --- 1 vangelis webkit-unassigned ahmad.saleem792 cmarrin e.imhotep eoconnor jamesr mail mattwoodrow mrobinson simon.fraser oldest_to_newest 413016 0 vangelis 2011-05-31 17:33:52 -0700 Should children of an element with -webkit-transform-style set to flat draw in document order or be depth sorted? Safari depth sorts whereas Chrome's compositor doesn't. My take is that unless the transform-style of the parent is set to preserves-3d, children should be drawn in their document (or z-index) order but I don't think the spec is clear about this. This page demonstrates the difference: http://dl.dropbox.com/u/2176065/perspective/index.html#album-4 (you'll need to mouse over the covers on the right to get them to flip around) 413021 1 jamesr 2011-05-31 17:40:32 -0700 I think that the elements have to be painted in document order (or more precisely the usual CSS painting order) unless CSS specifies exactly what Safari's depth sort does, which seems somewhat impractical. 413028 2 simon.fraser 2011-05-31 17:45:24 -0700 -webkit-transform-style: flat should draw in document order, with no intersection. Safari isn't able to do this correctly yet. 1692532 3 e.imhotep 2020-09-28 06:54:52 -0700 Just wanted to report that this is still an issue, and is causing us considerable headaches when building a WebGL AR/VR application which needs to transform the HUD, which is partially written with normal DOM elements. 1959549 4 ahmad.saleem792 2023-06-02 08:34:06 -0700 Test case link from StackOverflow mentioning this bug: https://stackoverflow.com/questions/76248303/z-index-and-translate-3d-not-work-the-same-in-chrome-and-safari/76248787#76248787 It is still reproducible in Safari Technology Preview 171.