216240 2020-09-07 03:49:52 -0700 vw units doesn't get updated inside shadow trees as frame is resized 2022-07-05 12:10:35 -0700 1 1 1 Unclassified WebKit Layout and Rendering Safari 13 Mac macOS 10.14 RESOLVED FIXED InRadar P2 Major --- 148695 1 rayproudnikoff rniwa bfulgham hi koivisto rniwa simon.fraser vahan.hartooni webkit-bug-importer zalan oldest_to_newest 1686334 0 rayproudnikoff 2020-09-07 03:49:52 -0700 Summary: Elements inside a custom element with a shadow tree render strangely if they're positioned fixed/absolute with vw units from left/right. First render looks correct, but if the page has been resized in width, the element stays the same, not following its left/right property, resulting in being outside of the viewport. Reproduce: https://jsfiddle.net/tuk1905w/3/ 1. Create a custom element 2. Attach Shadow with "mode: open" 3. Append an element 4. Add styling to that element so it has "position: fixed" and "left: calc(100vw - 100px)" 5. Resize the window changing its width 6. The element positioned strangely, not the way when it's outside a shadow tree Workaround (the way I fixed it): https://jsfiddle.net/y4azr6t5/ On the resize handler I set a custom value to `window.innerWidth * 0.01` and use that custom value to position the element inside the shadow tree. JS: ``` const vw = window.innerWidth * 0.01 document.documentElement.style.setProperty("--vw", `${vw}px`) ``` CSS: ``` button { left: calc((var(--vw, 1vw) * 100) - 200px); } ``` Note: Interesting that if I open web inspector and change any value of that positioned element Safari rerenders it correctly. But it works only until next resize. 1686587 1 webkit-bug-importer 2020-09-08 09:43:36 -0700 <rdar://problem/68513285> 1874083 2 vahan.hartooni 2022-06-03 17:32:02 -0700 This doesn't just affect positioning, but dimensions as well. Take for example this example: https://jsfiddle.net/auzekghL/ When you resize the window, the blue box doesn't update it's width or height to fit the window. Compare that to this blue box which does: https://jsfiddle.net/1jyacbzh/ Both blue boxes have these two css rules: height: calc(100vh - 50px); width: 100vw; But the first one is in a shadow dom. 1874332 3 vahan.hartooni 2022-06-06 11:35:16 -0700 There is a workaround where you can apply `width: 100vw` on the `:host`: https://jsfiddle.net/3kxn0veh/ Unfortunately, you can't utilize the same technique on height: https://jsfiddle.net/3nktrqw9/ 1880540 4 rniwa 2022-07-04 10:48:02 -0700 This is a bug in Document::updateViewportUnitsOnResize(). It needs to iterate over all shadow roots & invalidate styles instead of just at the document level. 1880541 5 460657 rniwa 2022-07-04 10:55:49 -0700 Created attachment 460657 WIP 1880554 6 rniwa 2022-07-04 11:21:13 -0700 Pull request: https://github.com/WebKit/WebKit/pull/2061 1880566 7 rniwa 2022-07-04 12:14:58 -0700 Pull request: https://github.com/WebKit/WebKit/pull/2062 1880759 8 ews-feeder 2022-07-05 12:10:32 -0700 Committed 252149@main (50df76018d84): <https://commits.webkit.org/252149@main> Reviewed commits have been landed. Closing PR #2062 and removing active labels. 460657 2022-07-04 10:55:49 -0700 2022-07-04 10:55:49 -0700 WIP wip216240.patch text/plain 1034 rniwa ZGlmZiAtLWdpdCBhL1NvdXJjZS9XZWJDb3JlL2RvbS9Eb2N1bWVudC5jcHAgYi9Tb3VyY2UvV2Vi Q29yZS9kb20vRG9jdW1lbnQuY3BwCmluZGV4IDg0MWEyNDFkZDIzMC4uN2FhMmNhNTU2MTU5IDEw MDY0NAotLS0gYS9Tb3VyY2UvV2ViQ29yZS9kb20vRG9jdW1lbnQuY3BwCisrKyBiL1NvdXJjZS9X ZWJDb3JlL2RvbS9Eb2N1bWVudC5jcHAKQEAgLTQzNjIsNiArNDM2MiwxOCBAQCB2b2lkIERvY3Vt ZW50Ojp1cGRhdGVWaWV3cG9ydFVuaXRzT25SZXNpemUoKQogICAgICAgICBpZiAocmVuZGVyZXIg JiYgcmVuZGVyZXItPnN0eWxlKCkudXNlc1ZpZXdwb3J0VW5pdHMoKSkKICAgICAgICAgICAgIGVs ZW1lbnQtPmludmFsaWRhdGVTdHlsZSgpOwogICAgIH0KKworICAgIGZvciAoYXV0byogZGVzY2Vu ZGFudFNoYWRvd1Jvb3QgOiBpbkRvY3VtZW50U2hhZG93Um9vdHMoKSkgeworICAgICAgICBpZiAo ZGVzY2VuZGFudFNoYWRvd1Jvb3QtPm1vZGUoKSA9PSBTaGFkb3dSb290TW9kZTo6VXNlckFnZW50 KQorICAgICAgICAgICAgY29udGludWU7CisgICAgICAgIGRlc2NlbmRhbnRTaGFkb3dSb290LT5z dHlsZVNjb3BlKCkucmVzb2x2ZXIoKS5jbGVhckNhY2hlZERlY2xhcmF0aW9uc0FmZmVjdGVkQnlW aWV3cG9ydFVuaXRzKCk7CisKKyAgICAgICAgZm9yIChSZWZQdHIgZWxlbWVudCA9IEVsZW1lbnRU cmF2ZXJzYWw6OmZpcnN0V2l0aGluKCpkZXNjZW5kYW50U2hhZG93Um9vdCk7IGVsZW1lbnQ7IGVs ZW1lbnQgPSBFbGVtZW50VHJhdmVyc2FsOjpuZXh0SW5jbHVkaW5nUHNldWRvKCplbGVtZW50KSkg eworICAgICAgICAgICAgYXV0byogcmVuZGVyZXIgPSBlbGVtZW50LT5yZW5kZXJlcigpOworICAg ICAgICAgICAgaWYgKHJlbmRlcmVyICYmIHJlbmRlcmVyLT5zdHlsZSgpLnVzZXNWaWV3cG9ydFVu aXRzKCkpCisgICAgICAgICAgICAgICAgZWxlbWVudC0+aW52YWxpZGF0ZVN0eWxlKCk7CisgICAg ICAgIH0KKyAgICB9CiB9CiAKIHZvaWQgRG9jdW1lbnQ6OnNldE5lZWRzRE9NV2luZG93UmVzaXpl RXZlbnQoKQo=