2026 リモート Mac フロント公開検収：
Popover API と invoker の Safari／Chromium 差異対照表と段階的強化三歩
想定読者：Popover／popovertarget を載せるフロント。トップレイヤーとフォーカスは表と三歩で固定します。関連：デプロイ後 Safari、Import Maps、SW 検収。
01 Popover／invoker の能力検出
1) Chromium で閉じが通っても Safari はフォーカスや Tab 順がずれることがあります。
2) popovertarget 等で分岐が増え、静的検査を抜けると本番のみで落ちます。
3) 全面 polyfill はバンドル増と二重挙動の元になり、境界を README に書かないとロールバックが遅れます。
検出は 'showPopover' in HTMLElement.prototype と popover、ボタンは popovertarget の有無をテンプレで確認し、対象外はチケットに明記します。
02 Safari と Chromium の差異表
差は トップレイヤー、フォーカス、invoker と位置に出やすいです。
| 観点 | Safari／WebKit | Chromium |
|---|---|---|
トップレイヤー／::backdrop |
影や合成の細部が異なることがあります。スクショ比較。 | DevTools でレイヤーが追いやすい。 |
| フォーカス・閉じる | VoiceOver 併用で Tab／Esc の差が出やすい。 | 差は小さいこともあるが手順固定で比較。 |
| invoker | 対応版を固定し、無ければ click フォールバックを票に。 | 静的検査で属性欠落を防ぐ。 |
| Anchor | 位置計算の差が出やすい。同じ幅で両系譜。 | 同様。リモート Mac で実寸合わせ。 |
可引用： Esc・外側クリック・フォーカス復帰を同一リスト化し、Private も回す。
03 段階的強化の手順と polyfill 戦略の境界
三歩チェックリスト：
- 基線：
details等で API 無しでも閉じられる導線を残す。 - Popover パス： 表どおりに操作を固定し、デプロイ後検証と同ラベルでステージングを開く。
- 境界： polyfill は入口の show／hide のみに限定し、失敗時は基線へ。README に書く。
公開前五手： 機能検出で分岐／非対応は showPopover 等を明示呼び出し／Playwright webkit・chromium／リモート Mac で実機と冷温キャッシュ（モジュール検収と同様）／SW は SW 検収票で BUILD_ID 突合。
可引用： polyfill は KB 増と二重イベントを計測し、閾値超なら全面適用を却下。
04 FAQ
invoker が無い場合は popover を使わない方がよいですか
検出で分岐し、無ければ明示ハンドラで同じ UI を出します。
Chromium のみ先行リリースしてよいですか
基線が必須です。チケットに WebKit 向け導線と実機パスを残します。
全面 polyfill は推奨されますか
入口のみか基線降格が安全。A11y は手順で担保します。