CSS View Transitions本番投入前に知る5つの非互換【プロンプト作例】
CSS View Transitionsが切り拓くUXと、その影
Webページ間のアニメーション遷移「Cross-Document View Transitions」が、2026年春のBaselineに含まれた。これにより、SPAライクな滑らかな画面遷移を、JavaScriptに頼らずCSSだけで実装できるようになった。特に@view-transitionルールとview-transition-nameプロパティの組み合わせは、従来のページリロードの硬い体験を一変させる。
しかし、CSS-Tricksの記事「Cross-Document View Transitions: The Gotchas Nobody Mentions」が指摘するように、実装段階で遭遇する非互換は少なくない。本番環境で「動かない」「壊れた」と慌てる前に、5つの落とし穴を整理する。
落とし穴1：スクロール位置がリセットされる
遷移前後でスクロール位置が保持されない。ユーザーが長い記事の途中でリンクをクリックすると、遷移後にページの先頭に戻る。これはscroll-behavior: smoothだけでは解決できない。document.documentElement.style.scrollBehaviorを遷移開始時にautoに切り替え、popstateイベントで位置を復元する処理が必要だ。特に無限スクロールを採用しているサイトでは、ユーザー体験を大きく損なう
落とし穴2：フォームの二重送信と送信中の遷移
フォーム送信時にView Transitionが発生すると、fetchやFormDataの非同期処理が完了する前にページが切り替わる可能性がある。結果として、サーバー側で重複リクエストが処理される、またはユーザーには「送信済み」と見えないまま次のページが表示される。対策として、transition.startViewTransition()を呼び出す前にformのdisabled属性をtrueに設定し、Promise完了後に遷移を開始する設計が必須だ。
落とし穴3：アクセシビリティツリーの崩壊
View Transition中にDOMが一時的に複製される内部処理のため、スクリーンリーダーが遷移前後のコンテンツを同時に読み上げる問題が報告されている。特にaria-liveリージョンやrole='alert'を持つ要素が遷移対象に含まれると、ユーザーに混乱を与える。回避策として、遷移対象からアクセシビリティ上重要な要素を外すか、aria-hiddenを遷移中だけ一時的にtrueに切り替える。
落とし穴4：CSSカスタムプロパティの継承断絶
異なるドメインのページ間でView Transitionを使う場合、::view-transition-oldや::view-transition-new擬似要素が期待通りにスタイルを継承しない。例えば、ルート要素に設定した--primary-colorが遷移先ページで未定義の場合、アニメーション中に色がデフォルト値にフォールバックする。解決策は、遷移に関わるカスタムプロパティをhtml要素ではなく:root疑似クラスで定義し、かつ遷移先でも同じ変数名で値を設定しておくこと。
落とし穴5：パフォーマンスプロファイリングの誤認
DevToolsのパフォーマンスタブでView Transitionのフレームレートを計測すると、requestAnimationFrameのタイムスタンプが実際の描画タイミングとずれる。これはブラウザがView Transition専用の合成レイヤーを別途生成するため。正しい計測には、PerformanceObserverでlargest-contentful-paintやlayout-shiftのイベントを監視し、遷移開始から終了までの累積スコアを比較する必要がある。
まだ埋まっていない実装の穴
2026年4月時点で、Chromium系はView Transitionを広くサポートしているが、FirefoxとSafariは一部機能（特に@view-transitionルールとクロスドキュメント遷移）の実装が遅れている。WebプラットフォームのBaselineに含まれたとはいえ、すべてのブラウザで同一の挙動を期待してはいけない。プログレッシブエンハンスメントの原則に立ち返り、View Transitionが効かない環境では従来のページ遷移でフォールバックする設計を推奨する。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！