Created attachment 469185 [details] 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.
I should note that other mobile browsers on Android do seem to struggle with this as well.
Created attachment 469186 [details] A screen captures of the scroll jank issue when the address bar collapses and expands
Created attachment 469187 [details] A screen capture of scroll snapping to the next section on overscroll (as described in the issue, but possibly a different problem?).
<rdar://problem/120284407>