NEW 234297
Shadow DOM Recalculating styles on every hover with position absolute slot
https://bugs.webkit.org/show_bug.cgi?id=234297
Summary Shadow DOM Recalculating styles on every hover with position absolute slot
Liam DeBeasi
Reported 2021-12-14 07:51:29 PST
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.
Attachments
Code reproduction (1.55 KB, text/html)
2021-12-14 07:51 PST, Liam DeBeasi
no flags
Radar WebKit Bug Importer
Comment 1 2021-12-21 07:52:15 PST
Note You need to log in before you can comment on or make changes to this bug.