NEW 106841
[Compositor][Mac] Layers with preserve-3d should not intersect with layers without preserve-3d 
https://bugs.webkit.org/show_bug.cgi?id=106841
Summary [Compositor][Mac] Layers with preserve-3d should not intersect with layers wi...
Alexandru Chiculita
Reported 2013-01-14 16:24:15 PST
Created attachment 182651 [details] test-case Look at the attach test-case. The green box should render completely behind the gray rectangles, but it looks like they participate in the same 3d rendering context. I could reproduce the issue on Safari Mac. Chromium gets it right.
Attachments
test-case (3.53 KB, text/html)
2013-01-14 16:24 PST, Alexandru Chiculita 		no flags
Details
result-chrome (37.38 KB, image/jpeg)
2013-01-14 16:27 PST, Alexandru Chiculita 		no flags
Details
result-mac (42.46 KB, image/jpeg)
2013-01-14 16:27 PST, Alexandru Chiculita 		no flags
Details
test-case-with-prefixes (5.22 KB, text/html)
2013-01-14 17:17 PST, Alexandru Chiculita 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Alexandru Chiculita
Comment 1 2013-01-14 16:27:32 PST
Created attachment 182653 [details] result-chrome
Alexandru Chiculita
Comment 2 2013-01-14 16:27:49 PST
Created attachment 182654 [details] result-mac
Simon Fraser (smfr)
Comment 3 2013-01-14 16:33:45 PST
Might be a dup of bug 85261.
Alexandru Chiculita
Comment 4 2013-01-14 16:54:39 PST
It looks like two different bugs. That bug reproduces in both Chromium and Safari and is due to the fact that the parent 3d rendering context is determined using the GraphicsLayers tree instead of using the parent containing block. In that case, adding a simple transform on the "plane" elements looks like fixing the problem. Maybe for that one, the fix would be to force graphics layer creation for layers that have a different transform-style from their parents. This bug only reproduces in Safari. Here are some links into the specification: http://www.w3.org/TR/css3-transforms/ > A 3D rendering context is established by a a transformable element whose computed value > for ‘transform-style’ is ‘preserve-3d’, and which itself is not part of a 3D rendering context. > Note that such an element is always a containing block. An element that establishes a 3D > rendering context also participates in that context. So in this case the "preserve-3d" layer creates a 3d rendering context and participates in it. However, it should be a different 3d rendering context than the 3d rendering contexts that other sibling layers might create. In this case it looks like the first preserve-3d layer will propagate its own 3d redering context to the parent layer, so next layers will just inherit the same one. Most probably the fix would be to create another level of CALayers in the compositor for layers that have "preserve-3d" and create the 3d rendering context (not just propagate it), so that siblings are separated correctly.
Alexandru Chiculita
Comment 5 2013-01-14 17:17:25 PST
Created attachment 182666 [details] test-case-with-prefixes Added prefixes to the test case. Looks like Firefox is rendering the same way as Chromium. IE doesn't support preserve-3d yet (http://msdn.microsoft.com/en-us/library/ie/hh772282(v=vs.85).aspx).
Roger F. Gay
Comment 6 2021-07-13 03:11:49 PDT
Note that chrome / Firefox testing is out of date now. This works properly now in Chrome, Firefox, and Edge.
Note You need to log in before you can comment on or make changes to this bug.