CSS scrollbar-gutter: stable в 2026 для статического HTML, модалок и Safari QA

Маркетинговые страницы на статическом HTML по-прежнему сталкиваются с классической UX-проблемой: как только длинная статья становится прокручиваемой, классическая полоса забирает примерно 12–17 px на конце строки направления письма, и каждый центрированный hero, липкая навигация и выравнивание модалки «подпрыгивают» вбок. Дизайнеры называют это сдвигом вёрстки, команды производительности — CLS. В 2026 году ключевое слово scrollbar-gutter: stable — декларативное решение: браузер держит желоб даже на коротких страницах без прокрутки, поэтому переключение overflow не перестраивает сетку. Этот гайд для сайтов без клиентского роутера — вручную или из генераторов вроде Eleventy, Astro и Hugo; покажем, как сочетать политику с диалогами и липким хромом, и почему подпись на железе Safari/WebKit всё ещё важнее, чем только headless. Для визуальной непрерывности между полными навигациями читайте также материал View Transitions на статических MPA: эти две возможности решают разные задачи, но часто попадают в один релизный поезд.

Вы получите матрицу решений, готовый фрагмент с @supports, численные ориентиры (ширина желоба, бюджеты CLS) и чек-лист Safari, укладывающийся в спринт на арендованном Mac mini.

Почему прокручиваемость ломает центрированные макеты

Когда overflow-y перескакивает с visible на auto после гидратации — или когда превью CMS подставляет более высокий блок — появляется классическая полоса и крадёт горизонтальное место. Статья с max-width около 1200 px и margin-inline: auto внезапно смещается примерно на ~15 px относительно того центра, который пользователь запомнил при первой отрисовке. Липкие шапки с фоном на 100vw выглядят ещё хуже: фон тянется на весь вьюпорт, а текст уважает желоб.

Десятилетиями спасали хаки на JavaScript с измерением window.innerWidth - document.documentElement.clientWidth, но они гоняются за гидратацией, плохо переживают масштабирование и ломаются, если оверлейная полоса скрыта до первого жеста прокрутки. Перенос политики в CSS уменьшает ветвления на этапе отрисовки и делает выход Eleventy, Astro и Hugo предсказуемым от билда к билду.

По публичным маркетинговым шаблонам в начале 2026 года примерно 4–7% десктопных сессий всё ещё видят классические неоверлейные полосы — этого достаточно, чтобы провалить жёсткие SLA по CLS, если желоб не резервировать.

В дизайн-систему стоит добавить токен --page-gutter-inline, отражающий выбранный scrollbar-gutter, чтобы библиотеки компонентов не зашивали симметричные отступы, конфликтующие с зарезервированной полосой.

На практике полезно заранее договориться с маркетингом: «полоса всегда учитывается в сетке» — тогда арт-директор не требует пиксель-перфекта коротких лендингов без полосы в ущерб стабильности длинных лонгридов.

Авторинг scrollbar-gutter с запасными вариантами

Прогрессивное улучшение начинается с корня прокрутки. Большинству статических сайтов достаточно одного правила на html или body, но не на обоих сразу, чтобы избежать двойного резерва:

html {
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; } /* крайний случай: всегда классическая полоса */
}

Ветка @supports not намеренно грубая: принудительный overflow-y: scroll всегда оставляет место даже там, где движок не знает scrollbar-gutter, ценой вечно видимой полосы на коротких страницах. Выбирайте её, когда по контракту CLS важнее минималистичного хрома без полосы.

С overflow-x: hidden будьте осторожны: горизонтальное обрезание всё ещё может конфликтовать с якорными диалогами, если в контент подмешивают широкие таблицы.

Статический CSS-бандл должен отдавать это объявление в том же хэшированном файле, что и примитивы вёрстки, чтобы частичный деплой на CDN никогда не сочетал устаревший HTML с отсутствующими правилами желоба.

Если вы используете critical CSS в <style> внутри документа, продублируйте там минимальное правило корня — иначе первый кадр до загрузки основного бандла всё равно покажет скачок.

Матрица: stable, auto и наследие

Ключевое слово	Когда помогает	Компромисс
stable	Маркетинг, где прокручиваемость меняется после асинхронной подгрузки	Лёгкая асимметрия на очень коротких страницах, где полоса никогда не появилась бы
auto	Желоб только при явном overflow	Не спасает первый сдвиг, если прокручиваемость меняется позже
JS-хаки ширины	Корпоративные режимы совместимости	Хрупко при зуме, split view и виртуализированных списках

Диалоги, блокировка фона и вложенный overflow

Модальные паттерны часто ставят overflow: hidden на body, оставляя внутреннюю прокрутку для юридического текста. Когда фон блокируется, исчезновение полосы может сдвинуть сам диалог, если политика желоба непоследовательна. Применяйте scrollbar-gutter: stable до открытия диалога в CSS, чтобы переход lock/unlock не перестраивал центрированную оболочку.

Для нативного <dialog> проверьте, что инертный фон всё ещё согласован с корневым желобом — в минорных релизах Safari поведение диалога и полосы уточнялось.

На вложенных панелях с прокруткой (двухколоночная документация) держите overscroll-behavior: contain на внутренних областях, чтобы «резиновая» прокрутка не боролась с резервом на корне.

В паре с липкими маркетинговыми барами тестируйте масштаб 110%: смещения sticky иногда пересчитываются после резерва желоба и дают однокадровый скачок, если одновременно анимируются трансформы.

Если модалка рисуется порталом поверх основного документа, убедитесь, что фокус-ловушка и возврат скролла не сбрасывают политику корня при закрытии.

Safari QA на облачном Mac mini

Playwright WebKit проверяет парсинг, но не все тонкие сдвиги, когда оверлейная полоса проявляется после первого события колеса. Заложите 20–35 минут на релиз в Safari на Apple silicon: stable-канал для контрактной подписи, Technology Preview при бисекте регрессий эвристик оверлея.

Если закупка железа затянулась, арендуйте облачный Mac mini на спринт. Хосты MacHTML на Apple Silicon обычно около $16.9/день, с SSH для выкладки статических бандлов и VNC для сравнения с продакшен-настройками Safari — дешевле срочной доставки ноутбуков.

Зеркалируйте продакшеновский color-scheme, темизацию ::-webkit-scrollbar (если есть) и стек шрифтов: кастомные полосы меняют предположения о ширине желоба.

Снимайте замедленные записи при открытии диалогов в 120 fps; однокадровые расхождения фона и модалки проще решить доказательством, чем спором в чате.

Операции должны привязывать ключи кэша CDN к хэшу CSS, где объявлен scrollbar-gutter, чтобы частичные деплои не рассинхронили HTML и токены вёрстки.

Для регрессионных прогонов сохраняйте профили WebKit с теми же флагами доступности, что у целевой аудитории B2B — увеличенный контраст и крупный текст часто меняют восприятие «прыжка».

Бюджеты CLS и телеметрия

Маркетинговые SLA всё чаще ограничивают CLS значением 0.05 на десктопных LCP-страницах. Проактивный резерв желоба обычно дешевле по суммарному сдвигу, чем компенсация отступами через поздний JavaScript.

Экспортируйте из RUM гистограммы горизонтального сдвига в пикселях; всплески выше 8 px при смене маршрута обычно означают, что прокручиваемость переключилась без политики желоба.

Алертите, когда события открытия модалки коррелируют с регрессией CLS свыше 0.02 в той же сессии — часто блокировка скролла убрала полосу без компенсации ширины.

Раз в квартал вручную просматривайте 30 самых длинных сессий с диалоговыми сценариями; автоматическая кластеризация по-прежнему путает появление оверлейной полосы с «сдвигом от картинки».

Согласуйте с аналитикой единый идентификатор сессии между Lighthouse, WebPageTest и записью экрана Safari — аудиторам проще воспроизводить спорные кадры.

Чек-лист выката для статических пайплайнов

1. Стейджинг за data-атрибутом на body, пока визуальный диф не пройдёт на staging.
2. В Playwright сравнивайте bounding box hero до/после инъекции высокого фикстур-контента — алерт при смещении свыше 6 px.
3. Документируйте порядок локалей; для RTL может понадобиться зеркалирование padding-токенов вместе с резервом.
4. Архивируйте трассы Lighthouse и WebPageTest с тем же session ID, что и Safari-захват, для аудиторского следа.

RTL, локали и дизайн-токены

В RTL-локалях полоса классически занимает «другой» край; комбинируйте scrollbar-gutter с логическими свойствами (margin-inline, padding-inline) и проверяйте арабскую/ивритовую вёрстку отдельным прогоном, а не только зеркалом в DevTools.

Когда маркетинг смешивает LTR-числа в RTL-странице, убедитесь, что направление изоляции для вставок не ломает расчёт ширины колонок рядом с зарезервированным желобом.

Документируйте в Confluence или в репозитории, какой корень (html или body) выбран канонически — новые разработчики иначе добавят второе правило «на всякий случай».

FAQ

Заменяет ли scrollbar-gutter хак overflow-y: scroll?

Для современных evergreen-таргетов — да; оставьте ветку @supports not для режимов совместимости.

Тратит ли stable место на крошечных лендингах?

Немного — сравните влияние на CLS с вариантом «полоса всегда видна» и выберите политику, которую примет бренд.

Взаимодействует ли это с фонами на 100vw?

Да — для фонов, привязанных к текстовым колонкам, предпочитайте логические единицы ширины вместо сырого вьюпорта.

Mac mini на Apple Silicon остаётся самым быстрым способом закрыть споры WebKit о полосах: нативные оверлейные эвристики, предсказуемый нагрев при длинных сессиях записи и переключатели доступности macOS, которые Linux-ВМ не эмулируют полностью. MacHTML сдаёт облачные Mac mini с SSH и VNC, чтобы команды статических сайтов проверяли scrollbar-gutter, диалоги и липкий хром без нового CapEx — поднимите на спринт, соберите доказательства, снимите машину после зелёного статуса.