234297 2021-12-14 07:51:29 -0800 Shadow DOM Recalculating styles on every hover with position absolute slot 2022-03-03 11:44:16 -0800 1 1 1 Unclassified WebKit CSS Safari 15 Unspecified Unspecified NEW InRadar P2 Normal --- 148695 1 ldebeasi webkit-unassigned bfulgham koivisto rniwa simon.fraser webkit-bug-importer oldest_to_newest 1824000 0 447133 ldebeasi 2021-12-14 07:51:29 -0800 Created attachment 447133 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. 1825997 1 webkit-bug-importer 2021-12-21 07:52:15 -0800 <rdar://problem/86768793> 447133 2021-12-14 07:51:29 -0800 2021-12-14 07:51:29 -0800 Code reproduction index.html text/html 1592 ldebeasi PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPldlYktpdCBTdHlsZSBS ZWNhbGN1bGF0aW9uPC90aXRsZT4KCiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0i dmlld3BvcnQtZml0PWNvdmVyLHdpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAs IG1pbmltdW0tc2NhbGU9MS4wLCBtYXhpbXVtLXNjYWxlPTEuMCwgdXNlci1zY2FsYWJsZT1ubyIg Lz4KICA8Ym9keT4KICAgIDxkaXY+RGl2IG91dHNpZGUgb2YgY29tcG9uZW50PC9kaXY+CgogICAg PGJyIC8+CgogICAgPGRpdiBzdHlsZT0icG9zaXRpb246IGFic29sdXRlIj5EaXYgb3V0c2lkZSBj b21wb25lbnQgd2l0aCBwb3NpdGlvbjogYWJzb2x1dGU8L2Rpdj4KICAgIAogICAgPGJyIC8+PGJy IC8+CiAgICAKICAgIDxhcHAtY29udGVudD4KICAgICAgPGRpdj5EaXYgaW5zaWRlIGNvbXBvbmVu dDwvZGl2PgogICAgPC9hcHAtY29udGVudD4KICAgIAogICAgPHA+U3RlcHMgdG8gcmVwcm9kdWNl IGlzc3VlOjwvcD4KICAgIDxvbD4KICAgICAgPGxpPk9wZW4gRGV2IFRvb2xzIGFuZCBzdGFydCBh IG5ldyAiVGltZWxpbmVzIiByZWNvcmRpbmcuPC9saT4KICAgICAgPGxpPkhvdmVyIG92ZXIgIkRp diBvdXRzaWRlIG9mIGNvbXBvbmVudCIuIE9ic2VydmUgdGhhdCBubyBzdHlsZSByZWNhbGN1bGF0 aW9ucyBvY2N1ci48L2xpPgogICAgICA8bGk+SG92ZXIgb3ZlciAiRGl2IG91dHNpZGUgY29tcG9u ZW50IHdpdGggcG9zaXRpb246IGFic29sdXRlIi4gT2JzZXJ2ZSB0aGF0IG5vIHN0eWxlIHJlY2Fs Y3VsYXRpb25zIG9jY3VyLjwvbGk+CiAgICAgIDxsaT5Ib3ZlciBvdmVyICJEaXYgaW5zaWRlIGNv bXBvbmVudCIuIE9ic2VydmUgdGhhdCBzdHlsZSByZWNhbGN1bGF0aW9ucyBvY2N1ci48L2xpPgog ICAgICA8bGk+RGlzYWJsZSB0aGUgInBvc2l0aW9uOiBhYnNvbHV0ZSIgc3R5bGVzIGZvciB0aGUg ImFic29sdXRlIiBzbG90IGluc2lkZSBvZiBhcHAtY29udGVudC48L2xpPgogICAgICA8bGk+SG92 ZXIgb3ZlciAiRGl2IGluc2lkZSBjb21wb25lbnQiLiBPYnNlcnZlIHRoYXQgc3R5bGUgcmVjYWxj dWxhdGlvbnMgb2NjdXIuPC9saT4KICAgIDwvb2w+CiAgICAKICAgIDxzY3JpcHQ+CiAgICAgIGNv bnN0IEFwcENvbnRlbnQgPSBjbGFzcyBleHRlbmRzIEhUTUxFbGVtZW50IHsKICAgICAgICBjb25z dHJ1Y3RvcigpIHsKICAgICAgICAgIHN1cGVyKCk7CiAgICAgICAgICBjb25zdCByb290ID0gdGhp cy5hdHRhY2hTaGFkb3coeyBtb2RlOiAnb3BlbicgfSk7CiAgICAgICAgICByb290LmlubmVySFRN TCA9IGAKICAgICAgICAgICAgPHN0eWxlPjo6c2xvdHRlZChbc2xvdD0iYWJzb2x1dGUiXSkgeyBw b3NpdGlvbjogYWJzb2x1dGU7IH08L3N0eWxlPgogICAgICAgICAgICA8c2xvdD48L3Nsb3Q+CiAg ICAgICAgICAgIDxzbG90IG5hbWU9ImFic29sdXRlIj48L3Nsb3Q+CiAgICAgICAgICBgOwogICAg ICAgIH0KICAgICAgfTsKICAgICAgCiAgICAgIGN1c3RvbUVsZW1lbnRzLmRlZmluZSgnYXBwLWNv bnRlbnQnLCBBcHBDb250ZW50KTsKICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPgo=