Bug 216240

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.