[Webkit-unassigned] [Bug 276033] New: transform-style: preserve-3d doesn't work across shadow DOM <slot>

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=276033

            Bug ID: 276033
           Summary: transform-style: preserve-3d doesn't work across
                    shadow DOM <slot>
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: iOS 17
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: antross at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

When a child element is slotted into a shadow DOM, `tranform-style: preserve-3d` from the host element doesn't work. This prevents creating composable web components which operate in a shared CSS 3D layout space.

Live Repro: https://codepen.io/antross/pen/eYaaxpO
Expected: Green square rotated 45deg with applied perspective (left edge appears closer than right edge)
Actual: Green square rotated 45deg WITHOUT perspective (left edge and right edge remain the same visual height)

Chrome: Works as expected
Firefox: Works as expected

Note: Elements directly contained in the shadow DOM (not slotted) work as expected.

Example Code:
```
<style>
        scene- {
                background-color: #000;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                perspective: 800px;
                transform-style: preserve-3d;
        }
        mesh- {
                background-color: lime;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 100px) rotateY(45deg);
                width: 100px;
                height: 100px;
        }
</style>
<scene->
        <template shadowrootmode="open">
                <slot></slot>
        </template>
        <mesh-></mesh->
</scene->
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240629/612a8af9/attachment.htm>