Steps to reproduce

Steps:

1. Add this CSS to the page:

html {
  scrollbar-gutter: stable;
}

and render a <Modal> component, e.g.

Current behavior

The layout moves and the backdrop doesn't cover the whole page.

Expected behavior

Either scrollbar-gutter: auto is set as a temporary reset while the dialog is open (better) or no padding is added to the body.

Context

• The issue is with Base UI's Modal component.
• I wondered if this could make sense for the flesh of the CssBaseline component [CssBaseline] Consider rework material-ui#38507, but feat(prefight): use scroolbar-gutter: stable tailwindlabs/tailwindcss#8234 does have a point. It's not something you want 100% of the time, it doesn't make sense with e.g. Google Maps.

TODO

• To change the approach in [docs-infra] Reserve space for scrollbar material-ui#40749 once this issue is solved (probably in the same PR actually)

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: scrollbar gutter