| Summary: | [Compositor][Mac] Layers with preserve-3d should not intersect with layers without preserve-3d | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Alexandru Chiculita <achicu> | ||||||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||||||
| Status: | NEW --- | ||||||||||||
| Severity: | Normal | CC: | rogerfgay, simon.fraser | ||||||||||
| Priority: | P2 | ||||||||||||
| Version: | 528+ (Nightly build) | ||||||||||||
| Hardware: | Unspecified | ||||||||||||
| OS: | Unspecified | ||||||||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=206262 | ||||||||||||
| Attachments: |
|
||||||||||||
Created attachment 182653 [details]
result-chrome
Created attachment 182654 [details]
result-mac
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. 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). Note that chrome / Firefox testing is out of date now. This works properly now in Chrome, Firefox, and Edge. |
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.