・Chromeで、ページ読み込み時に、transitionのバグが発生してしまう…。
・このバグを、解決するための方法を教えてほしいな！
という悩みを解決できる記事を書きました。
【この記事の信頼性】
当ブログ（RENBLOG）の編集長である僕は、これまでホームページ制作に約40サイト以上、携わらせて頂いております。
また、当ブログ（RENBLOG）は、記事数は少ないですが、数ページほど、10以内を獲得している為、割と信頼できるのではと思います。
このように、Google Chrome で、ホームページやブログの、ページを読み込んだ時に、一瞬だけ文字が style.css の当たっていないデフォルトの表示になることがあります。
Google Chrome と transition の、相性の悪さによって起こるバグの、簡単な解決策をご紹介しますね。
Chromeで、ページ読み込み時に、transitionのバグが発生してしまう時の解決策
解決策の結論は、</head>の直前に、下記のコードを追記してください。
<script>console.log("")</script>
全体像を見るとこのような感じになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<script>console.log("")</script>
</head>
<body>
</body>
</html>
もう少しだけ深堀りして、解説しますね！
Google Chrome × transition = バグが発生する理由
ホームページのグローバルナビが、ページ読み込み時にチラつく為、
まず、Webフォント関係を疑いましたが、どうやら違ったみたいです。
<link>タグを外したりと、いろいろ検証した結果、どうやら、transition: .5s; が怪しいという、疑いが出ました。
transition: 3s; にすると、分かりやすいかもです。
これは、Google Chrome 特有のバグらしく、style.css が、ページ読み込み時にすぐに適用されないというのが原因らしいです。
「初期 DOM 構築後になると、新規にクラスが設定されたとして…」
と詳しい説明は、Chrome の CSS transition がページロード時に動いてしまう問題の機序と対処を参考にしていただきつつ、
繰り返しになりますが、</head>の直前に、
<script>console.log("")</script>
このコードを追記すると、バグが簡単に解決できますので、参考になればと思います。
補足事項として、
script の中身は何でも大丈夫ですが、空にするのはNGです。
（単純にスキップされます。）
また、空白のみでも問題なしですが、module bundler や minifier に消されてしまう可能性があるので、ご注意ください。
（僕は、module bundler や minifier も触れないので、空欄にしております。）
今回は、以上です。
