demo · v140

Standalone PWA

In a standalone PWA the document root is the viewport — so setting overscroll-behavior on html finally controls the pull-to-refresh and rubber-band at the top of the window. Pre-140 the value was silently ignored.

simulate the html root

before — overscroll-behavior on <html> ignored

The root-level overscroll-behavior used to be silently ignored. Pull-to-refresh fires on overscroll at the top.

The fix: explicitly stop the propagation at the html element, but it only kicked in on the body until 140.

This frame has overscroll-behavior-y: auto on its scroll container. Scroll up past the top edge to feel the pull.

Padding text to ensure scroll. Padding text to ensure scroll. Padding text to ensure scroll.

More padding text. More padding text. More padding text.

after — overscroll-behavior on <html> works

Now overscroll-behavior on the root propagates to the viewport. The pull-to-refresh is suppressed; the rubber-band is suppressed.

Same content as the left pane. Same scroll mechanics. Different overscroll behaviour.

Padding text to ensure scroll. Padding text to ensure scroll. Padding text to ensure scroll.

More padding text. More padding text. More padding text.

End of content.

/* Single line that finally works on html in Chrome 140 */
html { overscroll-behavior: contain; }

see also

scenario focus

Select a scenario to focus its rendered example and summary.