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.
<rdar://problem/68513285>
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.
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/
This is a bug in Document::updateViewportUnitsOnResize(). It needs to iterate over all shadow roots & invalidate styles instead of just at the document level.
Created attachment 460657 [details] WIP
Pull request: https://github.com/WebKit/WebKit/pull/2061
Pull request: https://github.com/WebKit/WebKit/pull/2062
Committed 252149@main (50df76018d84): <https://commits.webkit.org/252149@main> Reviewed commits have been landed. Closing PR #2062 and removing active labels.