With modal components, it’s common/expected to prevent the background from scrolling.
/** * Prevent background scrolling with a modal dialog is open */ html:has(dialog[open]:modal) { overflow: hidden; } However, if your page was long enough that there were visible scrollbars, they disappear when you set overflow to hidden, which causes the layout to shift horizontally.
Sometimes it’s hard to see behind the modal backdrop, but it’s often visible and a bit jarring.