ページ遷移のちらつき（FOUC）は @view-transition が原因だった

このサイトの FOUC（Flash of Unstyled Content）の原因がわかったのでメモ。

@view-transition

前回の投稿、で FOUC の問題を解決するために <ClientRouter /> を導入して対応しましたが、原因がわかったので対応しました。

@view-transition {
  navigation: auto;
}

このコードは、ビュー遷移を有効にするためのものです。

<ClientRouter /> を使用していないサイトと比較して、いろいろ試していたら @view-transition が原因であることがわかりました。

私のサイトでは、View Transitions API をなんとなく使っていただけなので削除しました。<ClientRouter /> も必要ないので削除してすっきりしました。

まとめ

• @view-transition は FOUC の原因になる。