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

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

@view-transition

前回の投稿、では、 FOUC の問題を解決するために <ClientRouter/> を導入して対応したが、根本的な原因が判明したため改めて対策を行った。

@view-transition {
  navigation: auto;
}

このコードは、ブラウザのビュー遷移（View Transitions API）を有効にするためのものだ。

<ClientRouter/> を使用していないサイトと見比べながら検証を重ねたところ、どうやらこの @view-transition の記述自体が FOUC を引き起こす原因になっていることがわかった。

私のサイトでは、View Transitions API をなんとなく使っていただけだったため、今回はこの記述ごと削除することにした。 これに伴い、対策として入れていた <ClientRouter/> も不要になったため合わせて削除した。

まとめ

• @view-transition は、設定や環境によって FOUC の原因になることがある。