[Webkit-unassigned] [Bug 206228] New: element.style position DOM updates are laggy / not in sync

[bugzilla-daemon at webkit.org]

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

            Bug ID: 206228
           Summary: element.style position DOM updates are laggy / not in
                    sync
           Product: WebKit
           Version: Safari 13
          Hardware: Macintosh
                OS: macOS 10.15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: cc.glows at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 387649

  --> https://bugs.webkit.org/attachment.cgi?id=387649&action=review

Demonstration of the problem

Minimal Example:

```html
<style>
  body {
    height: 5000px;
  }

  .popper {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
  }

  #scrollContainer {
    position: relative;
    width: 300px;
    height: 300px;
    background: gray;
    overflow-y: scroll;
    left: 200px;
  }

  #scrollContainer::after {
    content: '';
    display: block;
    width: 1px;
    height: 900px;
  }
</style>

<div id="windowElement" class="popper"></div>

<div id="scrollContainer">
  <div id="scrollingContainerElement" class="popper"></div>
</div>

<script>
  window.addEventListener('scroll', () => {
    windowElement.style.top = `${window.pageYOffset}px`;
  });

  scrollContainer.addEventListener('scroll', () => {
    scrollingContainerElement.style.top = `${scrollContainer.scrollTop}px`;
  });
</script>
```html

When scrolling the main window/body, the element is not updated synchronously and "lags" behind its correct position. The one inside the scrolling container however is updated correctly. On iOS, both of these are laggy.

A popular overlay (tooltip, popover, drop-down) positioning engine Popper.js - https://popper.js.org/ - relies on this behavior being 1:1 (in-sync), otherwise unsightly lagging is visible. `position: fixed` has its own problems in other scenarios, so it cannot be used.

-- 
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/20200114/29da5856/attachment.htm>