Propagate Viewport overscroll-behavior from Root

concepts

1. Viewport Overscroll

   Setting overscroll-behavior on the root element now propagates to the viewport scroller — the rubber-band on the page itself is finally controllable from CSS.

2. Pull-to-refresh gate

   The interop motivation: cross-browser matrix of where overscroll-behavior must be set, plus the live gesture outcome for pull-to-refresh and back-swipe in Chrome 140.

3. Standalone PWA

   Side-by-side simulated PWA panes: legacy where html overscroll is ignored vs. post-140 where the value finally applies to the document scroller.

4. Propagation Chain

   Toggle the value on html, body, and a nested scroller; the verdict box shows the effective value the viewport ends up with and which element won the cascade.

5. Overscroll Recipe Book

   Four real-world patterns with working CSS: no pull-to-refresh in a PWA, scroll-driven animation, lock scroll while modal is open, and custom refresh UI. Each has a CSS snippet, live demo area, and a "Before Chrome 140" note explaining why the pattern didn't work without this fix.

why it shipped

Blink exhibits a behavior that differs from Gecko and WebKit in the way it propagates overscroll-behavior to the viewport. The value of this property, when propagated to the viewport, controls whether the user agent allows certain default user agent actions when the viewport is dragged/scrolled beyond its boundaries. Examples of these default actions are pull-to-refresh (typical on mobile) and swiping for forward/backward navigation (typical on Desktop). By modifying Chrome to propagate overscroll-behavior from the root and not the body, we are bringing the 3 major engines closer to interopera

references

• ChromeStatus entry
• Spec