Bug 106841 - [Compositor][Mac] Layers with preserve-3d should not intersect with layers without preserve-3d
Summary: [Compositor][Mac] Layers with preserve-3d should not intersect with layers wi...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2013-01-14 16:24 PST by Alexandru Chiculita
Modified: 2020-01-14 14:59 PST (History)
1 user (show)

See Also:

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

Note You need to log in before you can comment on or make changes to this bug.
Description Alexandru Chiculita 2013-01-14 16:24:15 PST
Created attachment 182651 [details]

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.
Comment 1 Alexandru Chiculita 2013-01-14 16:27:32 PST
Created attachment 182653 [details]
Comment 2 Alexandru Chiculita 2013-01-14 16:27:49 PST
Created attachment 182654 [details]
Comment 3 Simon Fraser (smfr) 2013-01-14 16:33:45 PST
Might be a dup of bug 85261.
Comment 4 Alexandru Chiculita 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.
Comment 5 Alexandru Chiculita 2013-01-14 17:17:25 PST
Created attachment 182666 [details]

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