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.
<rdar://problem/86768793>