2026 年遠端 Mac 前端發布驗收：
Popover API 與 Safari 行為差異對照表及漸進增強三步清單
Popover API 把浮層掛進瀏覽器管理的頂層，搭配 invoker（popovertarget）可減少膠水程式；僅在 Linux Chromium 無頭跑 E2E 仍易漏 WebKit 的焦點迴圈與輕觸關閉細節。下文含能力偵測片段、Safari／Chromium 差異表、漸進增強三步與 polyfill 策略邊界。延伸：View Transitions 與 Safari 降級、CSP 與 Safari 驗收、Safari × Playwright 相容、Vite／Webpack 部署與 Safari 驗證。
01 Popover／invoker 能力偵測
發布前請分開偵測「元素是否實作 Popover」與「按鈕是否支援 invoker」，兩者規格演進節奏不同，混成一個布林值會讓工單難對賬。建議在啟動時或第一次開啟浮層前快取結果，並在除錯版列出偵測欄位便於遠端截圖。
- ▸
typeof HTMLElement.prototype.showPopover === 'function'— Popover 核心 API。 - ▸
'popoverTargetElement' in HTMLButtonElement.prototype— 宣告式 invoker（含隱式popovertargetaction語意）。
若僅有前者而無後者，仍可用程式呼叫 showPopover()，但須自行維護 aria-expanded、鍵盤與觸控目標尺寸；若兩者皆無，請走純 CSS 定位或既有選單元件作基線，勿把非模態選單硬塞進 role="dialog"，以免輔助技術與焦點管理混線。
02 Safari 與 Chromium 差異表
兩引擎皆支援 Popover 與 invoker 主流程時，差異多在邊角互動與除錯訊號；下列為發布驗收常用對照，實際專案請以目標 Safari 小版本再補一輪手測。
| 主題 | Safari／WebKit | Chromium（Blink） |
|---|---|---|
| 頂層與疊加 | 由引擎管理 top layer；與高 z-index 固定列、全螢幕影片並存時需真機目視是否被遮。 |
類似；DevTools 階層面板較易看出遮擋來源。 |
| 輕觸外部關閉 | 點擊外部區域關閉行為與可點擊命中區有關；含滾動容器與 touch-action 時建議錄一則慢操作影片。 |
互動除錯工具較多；行動模擬仍建議補 WebKit 真機。 |
| 焦點與鍵盤 | Tab／Shift+Tab 與 Esc 需驗；VoiceOver 開啟時焦點迴圈可能與預期略有差。 | 可搭配自動化穩定重現；與 Safari 對照簽字。 |
| invoker 關聯 | popovertarget 指向 id；隱式／手動 popover 與按鈕配對錯誤時，錯誤訊息較內斂。 |
主控台提示相對直白；仍須防擴充功能攔截點擊。 |
| 自動化 | Playwright webkit 覆蓋主路徑；代理與憑證、觸控滾動以遠端 Mac 真 Safari補測。 |
chromium 加 Trace；與 WebKit 對照同一套腳本。 |
若頁面同時使用 ESM／Import Maps 或大型打包腳本，請確認浮層腳本在兩邊皆載入完成後再綁事件，避免「Chromium 已綁、Safari 延遲」的假陰性。
03 漸進增強步驟與 polyfill 策略邊界
漸進增強的目標是無 API 時仍可完成任務，有 API 時再換成較省膠水的實作；polyfill 則應複製可預期行為而非重寫整個瀏覽器疊加模型。
- 步驟一｜分段偵測與基線 UX：無
showPopover時用固定定位＋可聚焦容器完成同等操作路徑；無 invoker 時保留明確的開關按鈕與鍵盤捷徑。 - 步驟二｜雙引擎互動簽字：同一預發布網址、清快取後，Safari 與 Chromium 各完成開啟、輕觸關閉、Esc、Tab 迴圈；自動化附
trace.zip與主控台淨空截圖。 - 步驟三｜polyfill 邊界封頂：只補關閉手勢、點外部與類名切換；若需模擬多層 top layer 與全域捲動鎖定，優先簡化 UI或要求環境升級，避免維護成本爆炸。
與 dialog、全螢幕 API 疊加時
將「同頁同時開啟」列為手動探索案例寫進工單；此類組合自動化覆蓋率低，適合放在遠端 Mac 的發布前清單與 Service Worker 驗收 同批次檢視快取是否影響腳本載入順序。
04 FAQ
為何偵測到 showPopover 仍要單獨驗 invoker？
兩者釋出與實作進度可能不同；只有 Popover 而沒有宣告式按鈕時，你的程式仍要手動維護按鈕與浮層的對應關係，驗收表應分欄填寫以免混為「全綠」。
Chromium 全過、Safari 偶發關不掉怎麼辦？
先查是否有自訂 pointer-events、覆蓋層或父層 overflow 截斷命中；再於 Safari 開發選單看實際命中元素。若僅在觸控板手勢下發生，請補錄影片並對照輕觸關閉邏輯。
遠端 Mac 在流程裡扮演什麼角色？
提供與 CI 無頭環境同機的 WebKit 真 Safari 與桌面互動條件，作 Popover／invoker 發布簽字的終審環境，並可與 Chromium Trace 並陳給產品與維運。