Почему прыгает layout при открытии модалки?

Когда появляется вертикальный скролл, браузер добавляет scrollbar — из-за этого меняется ширина viewport и интерфейс смещается. Особенно заметно при модалках и переходах.
body {
overflow: hidden;
}

Убираешь скролл и layout резко сдвигается, потому что исчезает scrollbar.

Есть нативное решение без JS:
html {
scrollbar-gutter: stable;
}

Браузер резервирует место под скролл, даже если его нет (актуально для классического scrollbar):
html {
scrollbar-gutter: stable both-edges;
}

Можно зафиксировать пространство с двух сторон, центрирование остается ровным.

Работает в большинстве современных браузеров и сценариев (при overlay scrollbar эффект может быть незаметен).

В итоге layout больше не прыгает, интерфейс ощущается стабильнее и аккуратнее.

Code Ready | #совет