Замечали, как вся страница сдвигается, когда вы открываете модальное окно?

Это не баг — это просто отсутствующее CSS-свойство.

Вот что происходит:

Вы открываете модалку.

Затем обычно отключаете прокрутку, добавляя overflow: hidden к тегу body.

Прокрутка отключается, и скроллбар исчезает.

И тут — бум — страница сдвигается, например, на 15px влево, потому что контент расширяется и занимает место, где раньше был скроллбар.

В результате получается layout shift.

Чтобы это исправить, можно использовать scrollbar-gutter: stable.

Что делает это свойство:

Оно резервирует место под скроллбар, даже когда он не отображается. Когда открывается модалка и скроллбар исчезает, пространство под него остаётся зарезервированным, поэтому никакого сдвига layout не происходит.

Как это использовать 👇

body {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

Теперь, когда вы открываете модальное окно:

* скроллбар исчезает
* зарезервированное пространство остаётся
* layout остаётся стабильным

Важное замечание (!)

В MacOS вы можете не заметить этот эффект, пока явно не включите настройку “всегда показывать скроллбар”. По крайней мере, я заметил разницу только после этого.

Предполагаю, что для пользователей Windows/Linux это происходит чаще, чем для пользователей MacOS, но я не проверял, как это работает там.

Поддержка браузерами: ~93%

Одна строка CSS — и ваши модальные окна больше не выглядят сломанными.

@WebDev_Plus