According to the 3d transform spec, "If the transform-style is 'flat', all children of this element are rendered flattened into the 2D plane of the element". I take this to mean that sibling layers that are children of an element that doesn't specify preserve-3d as its transform-style are not expected to intersect in 3D. They should all be flattened onto their parent layer and draw in their document order. For example, in this demo: https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/WebGL+CSS.html after pressing space and getting the container tilted, the "rocker" div shouldn't cut through the "container" div as they are both children of the "body" element that doesn't specify preserve-3d.
Yeah, the spec is really vague about the 3d rendering model, and it might be a little tricky for us to make it correct on Mac, but I should try.
<rdar://problem/8511539>
New spec text says that they do intersect: http://dev.w3.org/csswg/css-transforms/
3D is covered in CSS 3D Transforms Module Level 3 https://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/ IMO, it seems pretty clear how things should work. 3D, is an illusion, done in 2D (it says so explicitly) and stacking context is preserved. 3D elements require preserve-3d transform-style on parent element. z-index still matters. I note also that it is easy to put a 2D element on top of a 3D scene using normal rules of stacking in both Firefox and Chrome. I believe they have interpreted correctly. This is both logical and quite useful for things like start pages, controls, and displays that need to sit on top of 3D scenes. I'm commenting here rather than writing a separate bug report. I've been testing on Mac 10.15.7 and iOS 14.6. This is a core problem for bringing my software to Safari. For what it's worth, I'm confident that this is a bug.
I note that the demo is no longer available. I will be more than happy to provide one - or submit a new bug report if that is more appropriate.