[Webkit-unassigned] [Bug 266835] New: dvh causes scroll jank as the address bar resizes when scrolling

[bugzilla-daemon at webkit.org]

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

            Bug ID: 266835
           Summary: dvh causes scroll jank as the address bar resizes when
                    scrolling
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: iOS 17
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: nathan at knowler.dev
                CC: simon.fraser at apple.com

Created attachment 469185

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

This example has multiple sections that are all 100dvh. It uses scroll snap to accentuate the issue.

When scrolling after a web page loads, elements using the dvh unit don’t resize to the larger viewport height until after scrolling has finished and the address bar has collapsed. This causes a janky effect where the page shifts down briefly before bouncing up into place as elements resize and the scroll is presumably adjusted to account for the resize. The demo I’ve attached uses scroll snap to accentuate the issue. Scroll snap paired with 100dvh actually can cause some situations where the page is undesirably snapped to the next section. That is most noticeable when scrolling back up to the top of a page as the address bar expands again. In some ways, this can create situations where content is effectively lost for some users who cannot account for the strange behaviour.

OS: iOS 17.2.1 (21C66)

Reproduce:

- Set multiple sections height to 100dvh and scroll the page.
- Use CSS scroll snap on the sections to accentuate the issue.

Some workarounds: 

- Not using the root scroller as the scroll container (i.e. using another element within the page). This has the effect of causing the address bar to never collapse, which I think is undesirable. I also generally don’t like not using the root scroller as I find it can cause issues with scroll chaining which are not always solvable with `overscroll-behavior`.
- In theory, a second workaround could involve watching for the address bar to resize (i.e. resize event and comparing with computed svh and lvh) and then trying to “lock” all previous sections to the original smaller viewport size, while transitioning the current section to the large viewport size while still scrolling. I’ve only gotten as far as creating a method to watch the address bar 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/20231223/75107a2a/attachment.htm>