| Summary: | Shadow DOM Recalculating styles on every hover with position absolute slot | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Liam DeBeasi <ldebeasi> | ||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | bfulgham, koivisto, rniwa, simon.fraser, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 15 | ||||||
| Hardware: | Unspecified | ||||||
| OS: | Unspecified | ||||||
| Bug Depends on: | |||||||
| Bug Blocks: | 148695 | ||||||
| Attachments: |
|
||||||
Created attachment 447133 [details] Code reproduction When hovering over elements slotted into a Shadow DOM custom element, WebKit will recalculate the styles for every mouse over/mouse out event. This is caused by the presence of a `<slot>` with `position: absolute`. Even if the element is slotted in a different slot, this style recalculation behavior will still happen. Steps to reproduce: 1. Open code reproduction in Safari for macOS. 2. Open Dev Tools and start a new "Timelines" recording. 3. Hover over "Div outside of component". Observe that no style recalculations occur. 4. Hover over "Div outside component with position: absolute". Observe that no style recalculations occur. 5. Hover over "Div inside component". Observe that style recalculations occur. 6. Disable the "position: absolute" styles for the "absolute" slot inside of app-content. 7. Hover over "Div inside component". Observe that style recalculations occur. Expected Behavior: I expect styles to not get recalculated when hovering over the div slotted inside of the Web Component. Actual Behavior: Styles get recalculated when hovering over the div slotted inside of the Web Component. Other Information: - This issue does not happen in Chrome. - This issue only happens with slotted content. If the slot with position: absolute is a non-slot inside of the Shadow DOM, this issue does not happen. - If the slotted div is placed inside of the Shadow DOM, this issue does not happen. - This issue does not happen with an position: absolute element outside of the component.