2026 年遠端 Mac 前端發布驗收：
捲軸占位與 scrollbar-gutter 在 Safari／Chromium 的差異對照表及漸進增強三步清單
以發布驗收可簽核為目標：垂直捲軸有無會改內文寬，WebKit 與 Blink 占位策略不同，單引擎通過仍可能上線才爆。常見痛點含固定頁首與主欄差一溝寬、對話框鎖背面捲動時置中區橫移、以及一次開 both-edges 致可讀寬反降。本文含瀏覽器矩陣、差異表、實作步驟（CSS／HTML 與降級）、回滾與監控、FAQ。延伸：Safari 相容對照、Playwright 與真機、IntersectionObserver 驗收；日文 ja 同 slug。
瀏覽器矩陣
凍結版本與組建，系統「顯示捲軸」列環境欄。真機 Safari 貼近使用者路徑，與 Chromium 雙簽，勿單靠無頭報告。
| 驗收焦點 | Safari／WebKit | Chromium |
|---|---|---|
| 凍結 | 穩定版為主；預覽另票。預發布與正式同策略。 | 穩定版為主；headless 不得單獨當簽核。 |
| 占位 | 溝槽與覆蓋受設定影響；兩種顯示策略各留證。 | 易腳本重現；仍須併 Safari 截圖。 |
| 巢狀捲動 | 多層捲動器寬度路徑複雜，必測。 | DevTools 輔助；以目視與客戶解析度為準。 |
| 遠端 Mac | 短真機路徑攔系統差異；見幫助公開頁。 | 與 CI 互補，差異回真機複核。 |
可引用： 票證含建置碼、捲軸設定、預發布網址。
差異表
對照捲軸占位；scrollbar-gutter 等保留原文便對 MDN。
| 觀點 | Safari | Chromium |
|---|---|---|
| stable | 抑寬度跳動；併鎖背面捲動要實機看。 | 易重現與讀計算樣式；覆蓋捲軸仍有視差。 |
| both-edges | 易左右留白過寬；預設關，另票審。 | 好測；必用 Safari 覆核寬度。 |
| 降級 | 強制 overflow-y:scroll 副作用大；要寫理由與監控。 |
同左；綁儀表欄位。 |
| 對話框 | 背面捲軸瞬斷易橫移；動畫開關同劇本。 | 差可能小；仍併 Safari 截圖。 |
可引用： 三步合約為支援查詢、根層 stable、條件式 both-edges；另需同 SHA 同網址再現。
實作步驟
落地對齊漸進增強三步：偵測分岔、根層 stable、條件式 both-edges 加雙引擎截圖；並列五項走查。
- 範圍：先
:root或單一捲動容器，勿一開始只塞對話框。 - 偵測：
@supports包新宣告；不支援則維持舊 overflow，降級畫面也算驗收。 - stable：根層開後長短頁各截一組；此時不加
both-edges。 - 對話框：開合與有無動畫兩路，看橫移。
- 文件：旗標、預設、回滾責任人入 readme；PR 附截圖。
三步摘要 偵測、根層 stable、可選 both-edges 與雙截圖。
可執行 CSS（降級：不支援則不新增寬度操作）：
@supports (scrollbar-gutter: stable) {
:root { scrollbar-gutter: stable; }
}
@supports not (scrollbar-gutter: stable) {
:root { /* 維持既有 overflow */ }
}
HTML 根節點掛類別、規則放樣式表：
<html lang="tw" class="doc-root">…</html>
關閉實驗只撤 @supports 區塊或旗標，勿與後台混寫。
回滾與監控
回滾一次提交可還原：刪樣式區塊或關旗標；勿與共用設定綁死。觸發例：指標連劣、客訴同劇本、預發布重現壞。
監控併版面指標與抽樣錄影；閾值書面合意。遠端 Mac 週短跑 Safari 可早抓引擎差。
可引用： on-call 寫明授權人與停滯上限。
FAQ
覆蓋捲軸下 stable 有用嗎？
有助抑寬跳；請兩種系統捲軸設定各截一圖。
Playwright 夠嗎？
量產可；系統捲軸與合成路徑請遠端 Mac Safari 短補人測。
常時 overflow scroll 當降級？
不建議；若必做，票上寫理由、監控欄與下版重評日。