demo · v144
Backdrop Shield
A canonical UI bug: open a modal, scroll on the backdrop—the page underneath also scrolls, breaking the trap. The backdrop is an overflow: auto element with no overflowing children, so pre-144 overscroll-behavior: contain didn’t apply. v144 makes it apply unconditionally.
overscroll-behavior: checking…
scroll the page down a bit, then open the modal and try to scroll on the dimmed backdrop (the area around the modal). pre-144 chained to the page; v144 stays contained.
Lorem ipsum content below to make the page actually scrollable so you can see the effect.
page scroll: 0px
modal content
This modal has its own scroll. Scroll inside it — chaining to the page is fine when you hit its end.
But the backdrop (the dim area around me) has overflow: auto with no overflow.
Try scrolling on the backdrop with the modal closed… you can't see it.
With overscroll-behavior: contain in v144 the page below stays still while you spin the wheel over the backdrop.
Filler line.
Filler line.
Filler line.
Filler line.
Filler line.
Filler line.
page filler — scroll the document to confirm whether backdrop scrolling chains here
half-way
bottom marker
the API
.backdrop {
position: fixed;
inset: 0;
overflow: auto; /* no overflowing content */
overscroll-behavior: contain; /* v144 honours this even with no overflow */
}