2026 Remote Mac Frontend Release Acceptance:
Scrollbar Gutter — Safari vs Chromium Difference Table + Three-Step Progressive Enhancement
Audience: teams signing off dashboards where vertical scrollbars toggle. Linux Chromium CI misses macOS overlay scrollbar geometry. You get a browser matrix, difference table, implementation steps with CSS, rollback and monitoring, and FAQ. See Playwright Safari on a remote Mac, device versus simulator versus cloud, and Node npm Safari checklist.
Why scrollbar gutter breaks acceptance
1) When overflow flips to auto a classic scrollbar steals width and shifts centered heroes and sticky bars. Stakeholders notice even when Lighthouse is green.
2) Chromium on Windows often disagrees with Safari on macOS because overlay scrollbars reserve width only after interaction.
3) scrollbar-gutter: stable without nested scroller tests risks double gutters beside modals. Capture engine notes and screenshots.
01 Browser matrix
Pin these rows before you freeze CSS. Replace versions with exact remote Mac and customer builds.
| Target | Role in acceptance | What to record |
|---|---|---|
| Safari on macOS (current stable WebKit) | Primary WebKit truth for overlay scrollbars. | Light and dark chrome, scroll bar visibility preference, width with devtools open. |
| Chromium (Chrome or Edge on macOS) | Secondary column for overlay settings and scale. | Overlay toggle, fractional scale, same staging SHA. |
| Remote Mac session | Reproducible evidence without shipping laptops. | Recording metadata plus Git SHA in filenames. |
02 Difference table
Confirm each cell on a remote Mac; minor WebKit releases still move scrollbar metrics.
| Topic | Safari WebKit | Chromium |
|---|---|---|
scrollbar-gutter: stable |
Reserves space when supported; check root overflow and transformed ancestors visually. | Predictable; still validate modals that set body overflow hidden. |
both-edges |
Symmetric math can differ from comps that assumed one classic bar. | Re-check RTL and vertical writing modes. |
| Overlay versus classic behavior | User preference changes when the gutter appears; scripts must name that preference. | Overlay settings shrink reserved width; reproduce macOS before trusting Linux CI. |
| Degradation without support | Legacy WebKit may ignore the rule; document overflow fallback tiers. | Pair detection with a second tier for finance and legal layouts. |
03 Implementation steps
Ship three tiers: modern gutter, classic reserve, documented embed exceptions.
- Gate with supports. Example:
@supports (scrollbar-gutter: stable) { html { scrollbar-gutter: stable; } }Addboth-edgesonly when design needs symmetry. - Single scroll owner. Put gutter on
htmlwhile inner shells usemin-height: 100dvh. Optional marker:<html class="layout-root">mapped to the same rules. - Degrade with overflow. If supports fails or QA sees double gutters, use
html { overflow-y: scroll; }. Note the always-on scrollbar trade in the release log.
Staging snippet (tune selectors):
@supports (scrollbar-gutter: stable) {
html {
scrollbar-gutter: stable;
}
}
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}Validate with a tall modal route: same inner width in Safari and Chromium, archive before and after shots for every production deploy candidate.
04 Rollback and monitoring
Ship behind a config key so ops can revert one line. Monitor cumulative layout shift on dialog toggles per Safari and Chromium slices. Watch third-party banners that pin body overflow; they fight gutter reserves. Keep a short written rollback note beside the pull request so night shift can restore the overflow tier without paging the author.
Record macOS scrollbar preference, browser build, inner width before and after modal, and whether scrollbar-gutter or overflow-y: scroll tier is active.
No unexplained horizontal jump greater than one device pixel on the hero grid when vertical scrollability toggles during a standard demo script.
If engines disagree after two patch attempts, freeze the simpler overflow tier and move the debate to design tokens rather than userland scrollbar emulation.
05 FAQ
Does scrollbar-gutter replace overflow-y scroll hacks?
It reduces horizontal layout shift when scrollbars appear but does not solve every modal or nested scroller case. Keep overflow-y scroll as an explicit degradation tier when you must reserve space in older WebKit.
Why test on a remote Mac instead of Linux Chromium only?
macOS Safari uses AppKit scrollbars and overlay behavior that differs from Windows and Linux builds. Acceptance should include WebKit on Apple hardware or a rented remote Mac session.
What should monitoring watch after rollout?
Track cumulative layout shift on routes with dialog open and closed, compare build tags, and alert when new third-party CSS changes overflow on the root scroller.
Run Real WebKit and Chromium Acceptance on a Remote Mac
Close scrollbar regressions without shipping hardware. Browse the home page, pricing, and help without signing in, then buy or rent. Follow Playwright WebKit checks and the blog index.