IO · 遅延読込 · スケルトン · リモート Mac 2026
2026 リモート Mac 公開検収：
Intersection Observer／遅延スケルトンの Safari・Chromium 対照表と三歩
2026.04.10
フロント／Web テスト
約 7 分
フロント／Web テスト向け。Chromium のみ CI では スクロール root と 初回コールバック の差で Safari 本番だけ骨組み残留が起きがちです。API 対照表・最小再現・受入れ閾値・三歩・実行チェック・FAQ。併読：Playwright WebKit、CSP・nonce 検収、Web Inspector FAQ。
遅延読込 · CLS · WebKit · 2026
01 Intersection Observer の API 差異対照表
リモート Mac で Safari／Chromium のログ突合論点。矩形ズレは計測優先。
| 論点 | Chromium 系（目安） | Safari／WebKit（目安） |
|---|---|---|
暗黙 root（null） |
ビューポート基準が素直。 | ネストスクロールと overscroll-behavior は再確認。 |
カスタム root |
DevTools でクリップ可視化しやすい。 | フォーカススクロール等でタイムラインが変わり得る。 |
rootMargin |
ズーム・DPR で先読み体感が変化。 | モバイル Safari は visual viewport 前提。 |
threshold／isIntersecting |
計測連携しやすい。 | サブピクセル・transform で比率ズレ報告が出やすい。 |
| 初回コールバック | 既交差なら即時に近い。 | フォント・CQ 後まで遅延しがち。 |
スケルトン＋loading="lazy" |
二重フェッチの温床。 | フェッチと DOM 交代のオーナーは一つに。 |
観測は契約です。Chromium のみでは顧客 Safari の交差幾何と一致しません。
02 最小再現デモ手順
HTTPS デモを リモート Mac に置き、Safari／Chromium が同一成果物を開きます。
overflow-y: autoパネルに行を約二十件。rootをパネル、rootMargin: "0px 0px 200px 0px"、threshold: [0, 0.01, 0.25]で末尾行を観測。isIntersecting・比率・rootBounds／boundingClientRectをログ。- スケルトン→実高へ差し替え、Inspector でシフト確認。
- 上端復帰・bfcache・ハード再読込後に再実行、
root: nullでも試す。
公開前三歩チェックリスト
- 契約固定：root・マージン・閾値・lazy・ビルドをチケット化。
- 両エンジン再現：項目一回フェッチ、往復でも骨組み残さない。
- WebKit 証跡：短い記録と CLS を添付、予算超過でゲート落とし。
実行できる確認項目（出荷前）
- 期待コールバック時はターゲット非ゼロサイズ。
- 成功後
unobserve／disconnect。 - 視差軽減・データセーバーでも骨組みから必ず脱出。
- ステージング CSP は本番同等で遅延アセットを止めない。
- CPU・ネットを一度絞り競合再現を潰す。
03 Safari リモートデバッグと受入れ閾値
04 FAQ
Q. Safari だけ骨組み残る？ A. root 誤り・ゼロ面積・非表示祖先・レイアウト前 observe。矩形を Chromium と差分。
Q. loading="lazy" で Observer 不要？ A. メディア向け。任意フェッチ代替ではない。二重発火に注意。
Q. Playwright WebKit だけで足りる？ A. 回帰量産に有効。最終は リモート Mac Safari 推奨。