Stop Modal Jank – No More Page Jump

Everyone’s seen it. You open a modal and the whole page twitches like it’s had too much caffeine. It’s one of those UI flaws that screams “unfinished.” Luckily, the fix is dead simple.

The problem

You open a modal, the scrollbar disappears, and the whole layout jumps sideways. It looks cheap.

The fix

One modern CSS line keeps everything locked in place, no JavaScript required.

html {
  scrollbar-gutter: stable both-edges;
}

.modal-open {
  overflow: hidden;
}

Why it works

scrollbar-gutter: stable keeps space reserved for the scrollbar so removing it doesn’t yank the layout. Works across modern browsers with a safe fallback for the rest.

Optional: stop background scroll on iOS while the modal is open.

@supports (position: fixed) {
  .modal-open {
    position: fixed;
    width: 100%;
  }
}