CSSの読み込み順序を変えたらView Transition APIが安定した

はじめに

重い腰を上げて弊ブログでもView Transition APIを使ってスムーズな画面遷移ができるようにしようと思い、試していたのですが、どうも挙動が安定せず調査したところCSSの読み込み順が原因でした。

View Transition APIでは今まで困難だったMPAの画面遷移でもアニメーションを使ったスムーズな遷移が可能になります。 2023年にリリースされ、現在では（一部機能を除いて）全てのブラウザで対応しています。

MPAでも遷移にアニメーションを付けられるということで、HonoXのSSGで作られた弊ブログにも導入してみます。

以下のCSSを追加すればひとまず遷移時にアニメーションが付きます。

@view-transition {
  navigation: auto;
}

…のはずだったんですが。

ローカルでビルドして挙動を見てみると、発火するときとしないときがありました。 (実際の差分)

特に一度開いたページに対してTransitionが発火しないという事象が発生しました。 gifの映像でも分かるようにブラウザバックやブラウザフォワード時には発火していました。

原因が不明で色々調べていたのですが、CSSファイルの読み込みをheadの先頭に持っていったところ挙動が安定しました。

ぶっちゃけ原因は良く分かってないです。 Claude Code曰く、HTMLキャッシュが使われた場合はCSSの読み込みが描画に追いつかず、Transitionが発火しないまま遷移してしまうとのことです。

ブラウザバックやブラウザフォワードで発火していたのは、おそらくバックフォワードキャッシュ（bfcache）によってCSSがメモリからロードされたため瞬時に反映されたことによるのではないかと推測しております。

（知識不足で全然分からなかった…。）

（その後試行錯誤した結果、 <script src="/static/theme.js" /> の前後で挙動に違いがあると判明しました。）

CSSの読み込み順序に寄ってView Transition APIの挙動が変わってしまった事象について書きました。これは完全に僕の環境依存なので参考にならないかもしれませんが、もし同じような事象が起きた際に役立つかもしれません。

もう少し原因深堀りしたいのですが体力切れしてしまったので、時間空いたときに調査してみようと思います。もし何か分かる人がいたら教えて下さい…。

ではまた。