[Webkit-unassigned] [Bug 216240] New: Broken positioning of elements inside a shadow tree using vw units on resize

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=216240

            Bug ID: 216240
           Summary: Broken positioning of elements inside a shadow tree
                    using vw units on resize
           Product: WebKit
           Version: Safari 13
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: rayproudnikoff at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200907/0f19e82f/attachment.htm>