Firefox の FOUC を直したよ！
FOUCとは何ぞやというと Flash of Unstyled Content の略でWebページを表示する際にCSSが適用される前の 素のHTMLが一瞬表示される現象。チラついて見えます。 経験上、Firefoxで発生しやすい気がする。
先日のリニューアルで当サイトも発生してしまうようになりました。 PC版のFirefox限定ですけどね。 3日かけて調べて色々試した結果、 何とか解決したので備忘録として残しておきます。 Firefoxのページ右クリック→調査のコンソールで以下の文章が出たり出なかったり。
ページの読み込みが完了する前にレイアウトの開始が強制されました。 スタイルシートがまだ読み込まれていない場合、 スタイル付けされていないコンテンツがちらつく原因となる可能性があります。
要するにCSSのパースが終わってないのに レンダリングが始まっちゃうってこと。 どう直せばいいのかも教えてよ。 通常はhead要素内で外部CSSを読み込むとレンダリングが ブロックされるはずなんですが、されない。 なんでやねーん……
結局原因は何だったかというとスマホ向けのポリフィル（JavaScript）でした。 これが60KBもあるので悪さしてるっぽい。 script要素にもmedia属性が付けられたら 良かったんですが残念ながら無理です。
で、どうしたかというと ポリフィル＋アニメーション設定 の部分を別の.jsファイルに分離して スマホのみページ読み込みの最後で呼び出すようにしました。
「load」イベントだと戻る、進むの時に発火しないので 「pageshow」イベントを設定。 createElementでscript要素を作成してbody要素の最後に追加で完了。
あー疲れたー！！