Приёмка фронтенда в 2026 году на удалённом Mac:
scrollbar-gutter и полоса прокрутки — таблица Safari и Chromium и три шага прогрессивного улучшения
2026-scrollbar-gutter-safari-chromium-remote-mac.htmlДля кого: команды, которым нужно подписать релиз, когда вертикальная прокрутка то появляется, то исчезает: центрированные блоки и липкие шапки «прыгают», а Lighthouse остаётся зелёным. Один только Chromium в Linux-CI не воспроизводит оверлейные полосы macOS и предпочтения пользователя. Ниже — матрица браузеров, таблица различий, шаги реализации с копируемым CSS и HTML, откат и мониторинг, FAQ. Рядом по теме: Playwright и Safari на удалённом Mac, устройство, симулятор и облако для совместимости, Node, npm и чек-лист Safari. Финальный блок ведёт на главную, тарифы и аренду или покупку без обязательного входа.
Цель текста — не «красивый CSS», а исполняемая приёмка: зафиксировать, какой движок как резервирует ширину под полосу, какие артефакты приложить к тикету и какой однострочный откат оставить дежурному. Три шага прогрессивного улучшения встроены в раздел «Шаги реализации»; дублирующий маркированный чек-лист в конце раздела можно копировать в описание pull request.
01 Матрица браузеров
Закрепите строки до заморозки стилей. Версии подставьте из точных сборок удалённого Mac и целевых клиентов; в приёмке недопустима формулировка «последний Safari» без номера.
| Цель | Роль в приёмке | Что записать |
|---|---|---|
| Safari на macOS (стабильный WebKit) | Эталон WebKit для оверлейных полос и настроек «показывать прокрутку». | Светлая и тёмная тема хрома, предпочтение видимости полосы, внутренняя ширина при открытых инструментах. |
| Chromium (Chrome или Edge на macOS) | Вторая колонка: оверлей, масштаб, те же SHA staging. | Переключатель оверлея, дробный масштаб, один URL и один коммит для обоих движков. |
| Сессия удалённого Mac | Воспроизводимые доказательства без отправки ноутбуков. | Метаданные записи экрана, Git SHA в имени файла, ширина окна в пикселях. |
Если продукт обещает поддержку iPadOS, добавьте отдельную строку для планшета: ширина 100dvh и полоса в системной рамке дают дополнительные сдвиги, не совпадающие с десктопом.
02 Таблица различий
Подтверждайте каждую ячейку на удалённом Mac: минорные выпуски WebKit по-прежнему двигают метрики полосы. Сравнивайте одинаковую логическую ширину viewport, а не только ширину окна ОС.
| Тема | Safari / WebKit | Chromium |
|---|---|---|
scrollbar-gutter: stable |
Резервирует место при поддержке; проверьте корневой overflow и предков с transform, иначе gutter «уедет» относительно макета. |
Поведение предсказуемее; всё равно прогоните модалки, которые ставят overflow: hidden на body. |
both-edges |
Симметричная математика может не совпасть с макетом, рассчитанным на одну «классическую» полосу. | Перепроверьте RTL и вертикальные режимы письма, если дизайн опирается на край экрана. |
| Оверлей и классика | Пользовательские настройки меняют момент появления зарезервированной ширины; в отчёте назовите сценарий «показывать всегда» и «авто». | Настройки оверлея на macOS сжимают резерв; Linux CI без этих настроек вводит в заблуждение. |
| Деградация без свойства | Старый WebKit может игнорировать правило; нужен явный второй уровень. | Сочетайте @supports с политикой для финансовых и юридических экранов, где сдвиг недопустим. |
03 Шаги реализации
Выкатывайте три уровня: современный gutter, классический резерв через overflow-y: scroll, задокументированные исключения для встраиваемых виджетов, которые борются с корневым скроллом.
- Ограничьте
scrollbar-gutterчерез@supports. Не смешивайте gutter наhtmlи принудительный скролл на вложенной оболочке без теста — получите двойной отступ. - Один владелец вертикального скролла. Gutter на
html, внутренние оболочки —min-height: 100dvh. Маркер в разметке помогает QA: класс на корне документа. - Деградация через overflow. Если
@supports not (scrollbar-gutter: stable)или QA видит двойную канавку, включайтеhtml { overflow-y: scroll; }и опишите компромисс «полоса всегда занимает место» в журнале релиза.
Минимальный связанный набор CSS (подстройте селекторы под ваш reset):
@supports (scrollbar-gutter: stable) {
html {
scrollbar-gutter: stable;
/* при симметричном макете: */
/* scrollbar-gutter: stable both-edges; */
}
}
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}HTML-скелет для привязки правил и ручной проверки в Web Inspector (один корневой класс — проще искать в тикете):
<!DOCTYPE html>
<html lang="ru" class="layout-scroll-root">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Staging — gutter QA</title>
<link rel="stylesheet" href="/app.css" />
</head>
<body>
<div id="app" style="min-height:200vh">
<header class="sticky top-0">липкий хром для сравнения ширины</header>
<main>…длинный контент…</main>
</div>
</body>
</html>На маршруте с высокой модалкой зафиксируйте одинаковую внутреннюю ширину контентной сетки в Safari и Chromium до и после открытия диалога; приложите пару скриншотов к каждому кандидату в прод.
Три шага для копирования в PR (краткий чек-лист): (1) зафиксировать активный уровень — gutter или overflow; (2) прогнать два движка на удалённом Mac с одинаковой шириной; (3) приложить скриншоты и значение предпочтения полосы в macOS.
04 Откат и мониторинг
Вынесите выбор уровня за фичефлаг или конфиг, чтобы ночная смена откатила одну строку без поиска автора. Мониторьте кумулятивный сдвиг макета на сценариях «диалог открыт / закрыт» с разрезом по Safari и Chromium. Сторонние баннеры, которые вешают overflow на body, ломают согласованность gutter — держите список таких интеграций и повторный смоук после их обновления.
Предпочтение полосы в macOS, сборка браузера, внутренняя ширина до и после модалки, активен ли уровень scrollbar-gutter или overflow-y: scroll.
Нет необъяснимого горизонтального скачка шире одного аппаратного пикселя в сетке героя при появлении вертикальной прокрутки по стандартному сценарию демо.
Если после двух патчей движки всё ещё расходятся, заморозьте простой уровень overflow-y: scroll и перенесите спор в дизайн-токены, а не в эмуляцию полосы на JS.
05 FAQ
Заменяет ли scrollbar-gutter приём overflow-y: scroll?
Частично: свойство уменьшает горизонтальный сдвиг при появлении полосы, но не закрывает вложенные скроллеры и сложные модалки. Для старых WebKit оставьте overflow-y: scroll как явный уровень деградации.
Зачем удалённый Mac, если в пайплайне уже есть Chromium?
Потому что геометрия полосы на macOS Safari завязана на AppKit и отличается от типичного Linux-раннера. Подпись «принято» должна опираться на WebKit на железе Apple или на арендованную сессию Mac в облаке.
Что мониторить после выката?
CLS на ключевых маршрутах с диалогом, сравнение по тегам сборки и алерты при смене стороннего CSS корневого overflow.
Когда включать both-edges?
Только если дизайн и макет явно требуют симметричного резерва с обеих сторон; иначе вы рискуете получить лишний отступ относительно макета в Figma, где полоса нарисована односторонне.
Закройте регрессии полосы прокрутки на реальном WebKit
Откройте главную, тарифы и помощь без регистрации, затем арендуйте или купите доступ к Mac. Продолжите чтение: тесты Playwright и Safari, таблица способов проверки Safari и каталог блога.