Bug 234297

Summary: Shadow DOM Recalculating styles on every hover with position absolute slot
Product: WebKit Reporter: Liam DeBeasi <ldebeasi>
Component: CSSAssignee: 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:
Description Flags
Code reproduction none

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.