2026 年遠端 Mac 前端發布驗收：
Intersection Observer 與懶加載骨架屏——Safari 與 Chromium 差異對照表及三步清單
適用對象：交付無限捲動、列表懶載入或骨架屏先行介面的前端與 QA 團隊。若預發布環境僅跑 Chromium，容易漏掉 WebKit 在捲動根、還原捲動與字型／版面穩定時序上的差異，導致「骨架卡死」或交換內容後 CLS 超標仍被放行。本文以前端／Web 測試意圖整理可對照的 API 行為、可複製的 Demo 步驟、Safari 遠端偵錯時建議寫入工單的數值閾值，以及發布前三步清單與 FAQ。延伸可併讀：Playwright WebKit 與 Safari 相容測試（遠端 Mac）、CSP nonce 與 Safari 驗收清單、CSS Container Queries 與 @layer（Safari／Chromium）。
01 API 差異表
IntersectionObserver 的選項字面在兩大引擎相同，但幾何計算所依附的捲動與合成上下文不同，因此 QA 應把「callback 內實際印出的欄位」當作合約，而不是只對照規格條文。下表列出發布驗收時建議在遠端 Mac上、以相同建置產物對 Safari 與 Chromium 逐列勾稽的焦點。
測試時固定視窗與裝置模擬；行動 Safari 另注意網址列顯隱對 rootMargin 感受的影響。
| 主題 | Chromium（Blink） | Safari（WebKit） |
|---|---|---|
隱式 root（root: null） |
對應視窗捲動；文件捲動場景直覺。 | 規格對齊；遇巢狀 overflow 時請改以實際捲動容器為 root 複測。 |
自訂 root |
DevTools 可清楚看到裁切與捲動邊界。 | API 相同；留意焦點捲入與非滑鼠捲動是否觸發預期 callback。 |
rootMargin |
縮放與 DPR 會改變「提前載入」感受。 | 行動 Safari 建議對齊 visual viewport；橡皮筋（overscroll）與還原捲動可能讓邊界案例較多。 |
threshold／isIntersecting |
次像素與 transform 節點上除錯工具成熟。 | 在變換、次像素取整或字型換行後，intersectionRatio 與 Chromium 日誌可能不一致，需以同一 DOM 快照比對。 |
| 首次 callback | 目標已相交時通常立即觸發。 | 字型或 Container Query 晚到可能造成晚觸發；骨架解除應冪等或具逾時降級。 |
骨架 ＋ loading="lazy" |
兩套閘道並行時易雙重請求。 | 同左；請在程式層指定單一觸發來源，並在 Network 面板驗證每個資源僅發起一次。 |
02 最小複現 Demo 步驟
目標是讓前端／Web 測試能在工單中附上「可點開的靜態頁＋操作步驟＋日誌欄位」，避免口頭描述 root 設定卻無法復現。請將 Demo 部署在HTTPS 的預發布或遠端 Mac內網位址，確保 Safari 與 Chromium 讀到同一份 artifact。
- 建立一個高度足夠的頁面，內含
overflow-y: auto的內層面板與約二十列列表項。 - 以該面板為
root建立 observer，設定rootMargin: "0px 0px 200px 0px"、threshold: [0, 0.01, 0.25]。 - 對最後一列目標在 callback 中印出
isIntersecting、intersectionRatio，並比對rootBounds與boundingClientRect。 - 將該列由骨架替換為實際內容（高度可與骨架不同），於 Web Inspector 觀察版面位移或相關指標。
- 依序重測：捲回頂端、bfcache 來回、強制重新載入；再將
root改為null重跑，驗證是否為錯誤捲動根所致。
若 Demo 一致而正式站不一致，優先查第三方腳本、containment、動態父層或 CSP／產物差異。
03 Safari 遠端偵錯與驗收閾值
透過 VNC／SSH 轉發等方式連上遠端 Mac後，以 Safari 開啟與 Chromium 相同的網址，於「開發」選單啟用 Web Inspector：觀察首次導覽後的版面／網路時間線，並把下列閾值寫進發布工單，作為可拒絕合併的客觀條件（可依產品調整，但須全團隊一致）。
- 骨架首次繪製：路由提交後，除非被 Web 字型阻塞，應在一個影格內可看見骨架或等價占位。
- 內容交換：在快速網路下，相交觸發後至骨架移除（或改為最終 UI）宜在三百毫秒內完成，除非需求明載豁免。
- CLS／版面位移：交換前以
min-height或骨架尺寸預留空間；反覆上下捲動不得出現持續卡住的骨架——先 bisectroot再歸咎網路。
發布驗收三步清單
- 凍結合約：將 root、
rootMargin、threshold、是否使用loading="lazy"，以及簽核用 Safari／Chromium 版本字串寫入工單或發布說明。 - 雙引擎跑通 Demo：同一靜態產物、同一操作腳本；確認每個列表項僅觸發單次資料請求，捲動往返後骨架必消失。
- 附 WebKit 證據：保留短錄影或主控台日誌截圖；若骨架交換後 CLS 超過團隊預算，不通過該次發布閘道。
- callback 應觸發時，目標在版面中具非零可見尺寸。
- 成功載入後已呼叫
unobserve或disconnect，避免重複觸發與記憶體洩漏。 - 在減少動態效果與省流模式（若產品定義）下，骨架仍會解除或顯示明確錯誤態。
- 預發布環境的 CSP 與正式一致，Safari 未阻擋懶載入所需資源（可併跑 CSP 驗收文）。
- 在 DevTools 對 CPU／網路各節流一次；競態下的卡骨架最容易在此浮現。
需要瀏覽方案與操作說明時，可開啟官網首頁、幫助中心，或免登入購買／套餐與租用頁選擇節點。
多端驗證：租用 Apple Silicon 遠端 Mac，Safari 與 Chromium 並行，部署後重跑 Demo；引擎行為不同時附兩邊日誌開票。
04 FAQ
為什麼 Safari 上骨架一直不消失？
多為錯誤的 root、目標相交面積為零、display: none 祖先，或在版面穩定前訂閱 observer。請匯出同一時間點的 rootBounds 與 boundingClientRect，與 Chromium 並列比對。
只有 loading="lazy" 可以嗎？
不足以涵蓋自訂資料請求與通用骨架元件；與 Intersection Observer 並用時務必避免雙重觸發，並以 Network 面板驗證。
Playwright WebKit 能完全取代手動 Safari 嗎？
自動化擅長迴歸量；真機 Safari仍利於簽核捲動鏈、影片層與字型合成等細節。建議 CI WebKit 冒煙＋遠端 Mac 手測組合。