View Transitions · Safari · リモート Mac 2026
2026 リモート Mac フロント公開検収：
View Transitions API と Safari 回帰対照表／漸進強化三步チェックリスト
2026.04.09
Web フロント／UX
約 8 分
View Transitions API 導入後、Safari 差と 視差効果を減らすでズレる公開前論点を整理します。表・漸進強化三步・コマンド例。関連：CSS コンテナと Safari 検収、トップ、ヘルプ。
同一文書／クロス文書 · reduce · リモート Mac
01 View Transitions API の能力と境界
document.startViewTransition は同一文書の DOM 更新をキャプチャします。ルーティングや a11y は外側です。クロスドキュメント型は MPA とサーバ設定が絡む別ゲートです。
- 装飾依存は reduce や未対応で破綻しやすい。
- 長い非同期はゴーストの温床。
- 名前付き遷移は CSS メンテが増える。
02 Safari／WebKit における差分
Chromium 基準だけだと WebKit で取りこぼします。リモート Mac の Safari でスクショ比較し、デプロイと Safari 検証に沿ってステージングを開く。Playwright WebKit は補助、最終は実機です。
03 フォールバックモードと無アニメーション経路
表は目安です。ブランチごとに安定版 Safari で再確認してください。
| 環境 | 同一文書 VT | クロス文書 VT | prefers-reduced-motion | 無アニメ経路 |
|---|---|---|---|---|
| Chromium 系（目安） | 実用域が広い | MPA で拡大中・条件付き | reduce では API を避け即時更新 |
startViewTransition 非呼出 |
| Safari／WebKit（目安） | 版により段階的 | 未対応または制限ありがち | 同上・ユーザー設定優先 | 通常ルーティングのみ |
漸進強化三步（実装順）
- 同期 DOM 更新を単一路にし、常に画面が切り替わる状態にする。
- API 存在時だけ同じ更新を
startViewTransitionでラップする。 matchMedia('(prefers-reduced-motion: reduce)')一致時は二歩目をスキップし即時更新に戻す。
フォールバック例（擬似コード）
function swap(update) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce || !document.startViewTransition) {
update();
return;
}
document.startViewTransition(() => update());
}
04 公開前の受入れ
ローカル／CI Mac で流せる短手順です。
pnpm run build && pnpm run preview（npm はbuild＋preview）。- コンソールで
typeof document.startViewTransitionを確認し、欠如時に即時更新になるか見る。 - Safari で視差効果を減らすをオン、主要遷移を手で踏む。
- Playwright
webkitでスモーク、タイムアウト監視。 - チケットに OS・Safari ビルド、スクショ、URL。
メモ：無アニメ正、API は増分、実機証跡の三点。
05 FAQ
Q. 同一文書と MPA を一関数で？ A. 分離。クロスは従来ナビ優先。
Q. Lighthouse だけ？ A. 体感は実機と reduce で変わり不足しがち。
Q. 名前付きは多いほど良い？ A. コスト増なので要所に絞る。