Cross-Document View Transitions：知るべき5つの非互換問題と対策プロンプト作例
Cross-Document View Transitions（以下CDVT）がブラウザに標準搭載され、同一オリジン内のページ遷移にスムーズなアニメーションを実装できる時代が到来した。しかしCSS-Tricksの記事が指摘するように、導入にはいくつかの非互換問題が潜む。本記事では、開発者が実際に遭遇する5つの落とし穴とその対策を整理する。
CDVTがもたらすパラダイムシフト
View Transitions APIはSPA（シングルページアプリケーション）で一般的だった画面遷移アニメーションを、MPA（マルチページアプリケーション）でも実現できる標準規格だ。2026年4月時点でChrome 127以降、Edge 127以降で安定して動作する。Firefoxは実験的フラグ付き、Safariは未対応と、ブラウザ間の差がまだ大きい。
開発者はCDVTを使うことで、JavaScriptライブラリに依存せずにページ遷移のアニメーションを定義できる。だがその恩恵を受ける前に、知っておくべき問題点がある。
落とし穴1：同一オリジン制約とクロスサイト問題
CDVTは原則的に同一オリジン内でのみ動作する。CDN経由でホストされたサブリソース（フォント、スクリプト、スタイルシート）が別オリジンにある場合、遷移が発動しないケースが出る。とくにfonts.googleapis.comやcdnjs.cloudflare.comなど外部CDNを多用するサイトで顕著だ。
対策として、@importではなく自己ホストのリソースを使うか、CDNのオリジンを許可リストに追加する。ただし後者はCORS設定が必要で、管理コストが増える。
落とし穴2：スクロール位置の不整合
遷移元と遷移先でスクロール位置が異なる場合、View Transitionのエフェクトが壊れる。とくに長い記事や無限スクロール採用サイトで発生しやすい。遷移中に一瞬別の位置が表示される「ジャンク」現象として現れる。
解決策として、document.startViewTransition()のコールバック内でスクロール位置を明示的にリセットする。遷移前にwindow.scrollTo(0,0)を実行するか、scroll-behavior: autoで強制する。
落とし穴3：フォーム入力状態の消失
ユーザーがフォームに入力中に遷移すると、CDVTはDOMのスナップショットを撮影するため、入力値が消失する。とくに非同期バリデーションを伴う長いフォームで問題が起きる。
回避方法は2つ。遷移前にフォームの内容をsessionStorageに保存し、遷移後に復元する。または遷移そのものを無効化する。CDVTの発動条件を制御するため、matchMediaで「データ損失の可能性がある場合」にフラグを立てる。
落とし穴4：アニメーションとアクセシビリティ
CDVTはCSSアニメーションを多用するため、prefers-reduced-motionを尊重しない実装が散見される。また@media (prefers-reduced-motion: reduce)メディアクエリを無視するブラウザがある。
対応として、CDVTのアニメーションをtransition-behavior: allow-discreteで許可する前に、JavaScript側でwindow.matchMedia('(prefers-reduced-motion: reduce)').matchesをチェックし、条件に応じて遷移をスキップする。
落とし穴5：ネストしたビュー遷移の競合
同じページ内で複数のView Transitionが同時に発動すると、スタックが競合して結果が不定になる。とくにナビゲーションとモーダル表示が同時に起きるケースで顕著だ。
推奨される戦略は、遷移キューを一元管理する。document.startViewTransitionをラップした関数を作り、Promise Chainで直列化する。またfinishedプロパティを監視して、前の遷移が完了するまで次の遷移を抑制する。
実装前にやるべき3つのチェック
- ブラウザ対応の確認: Can I Useで現在の対応状況を調べる。Safari未対応はプログレッシブエンハンスメントでカバーする。
- パフォーマンスプロファイリング: 遷移中のレイアウトシフト（CLS）とFPSを計測。複雑なアニメーションはGPUコンポジットに委ねる。
- アクセシビリティテスト: スクリーンリーダーで遷移前後のコンテンツが正しく読み上げられるか確認する。
CDVTはまだ発展途上の技術だが、2026年後半には主要ブラウザでのサポートが進むと予想される。今のうちに落とし穴を把握し、実装パターンを用意しておくことで、本番投入時のトラブルを減らせる。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！