Post

why overscroll-behavior on html/:root overrides everything on the page (╯°□°）╯︵ ┻━┻ #css

@jakearchibald.com interesting case for firefox 👀 mdn own example works in devtools on pc, but on mobile it doesn't - the messages don't stretch if you overscroll developer.mozilla.org/en-US/docs/W...

developer.mozilla.orgoverscroll-behavior CSS property - CSS | MDNThe overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.

10/8/26, 8:00 am0 reposts1 like

Jake Archibald

@jakearchibald.com

10 Aug

What do you mean by "stretch" here? Which operating system on mobile?

Brawaru ☕

@brawaru.dev

10 Aug

I am not sure how to call this effect tbh 😅 So this is dev tools in Firefox with mobile simulation enabled

Brawaru ☕

@brawaru.dev

10 Aug

(apparently my phone records video in such high resolution, bsky cannot handle it, so had to re-record) And this is actual Android. Chromium doesn't do this as subtle, so I showed it too. This MDN example however works completely differently on the phone (it doesn't)

Jake Archibald

@jakearchibald.com

10 Aug

I think I know what you mean now - the overscroll effect isn't happening (the bounce/stretch/glow/whatever). I'll get this filed.

Jake Archibald

@jakearchibald.com

10 Aug

Which overscroll value are you talking about, and which operating system on mobile?

Brawaru ☕

@brawaru.dev

10 Aug

That's Android 16. And values in question are `none` on :root/html (to disable page-wide), and `contain` on the scrollable containers where this effect belongs