JavaScript で CSS を追加すると FOUC が発生するため、Firefox で奇妙な動作に気付きました。問題は、CSS スタイルが JavaScript で動的に追加されるたびに、Firefox が Web フォントをリロードすることです。リロードされたファイルは通常キャッシュされますが、それでも FOUC (スタイル設定されていないコンテンツのフラッシュ) が作成されます。
実際、この問題はfont-family
、または@media
クエリを使用して CSS をドキュメントに動的に追加する場合にのみ発生します。どちらの場合も、Firefox は Web フォントをリロードします :(
Codepen のデモ: http://codepen.io/mjau-mjau/pen/XXgZbV?editors=101
画像でわかるように、CSS を動的に適用した後、Web フォントがリロードされます。
これは Firefox でのみ発生します。なぜこれが起こっているのか、またはFirefox用の公式バグトラッカーがあるのか 誰か知っていますか?