とあるサイトで、スマホのハンバーガーメニューで表示に不具合がありました。
初期状態では、メニュー本体はtransformで画面外にあり、ハンバーガーメニューがクリックされるとtransformを解除してスライドイン、その際、transitionでアニメーションさせている。というような構成でした。
Chromeでページ読み込み時にハンバーガーメニューをクリックしていないのに、メニューが一瞬表示されてしまうというもので、CSSのtransitionが原因のように見えました。
Chrome特有のバグらしい
外部スタイルシートに CSS transition を記述した際、仕様上は初期状態への遷移は発生しないはずなのだけれど、Chrome だと、デフォルトのスタイルから初期状態への遷移が発生してしまう、という問題。
https://qiita.com/nagtkk/items/27ff4f2fe17746afabdd
Chromeでページ読み込みした時に、transitionが動いてしまうのはChrome特有のバグということでした。
外部スタイルシートが読み込み時にすぐに適用されないというのが原因らしいです。
対策：外部スタイルシートを読み込んだ後に何らかのscriptを実行する
初期 DOM 構築完了前に、外部スタイルシートを解決させる。
https://qiita.com/nagtkk/items/27ff4f2fe17746afabdd
具体的には何かしらスクリプトを動かすだけで良い。
スクリプト実行前に、外部スタイルシートの解決を行ってくれる。
通常、外部CSSはheadタグ内部で読み込みますので、headタグの一番最後に<script>タグで何らかのスクリプトを実行すればよいということになると思います。
スクリプトは何でもよいので、以下のようなダミーを</head>の直前に入れることで対応しました。
<script>console.log("")</script><head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="hoge.css">
<script>console.log("")</script>
</head>まとめ
有名なテーマを使っている場合は、ほとんどのバグが無いのですが、自作テーマを使っているサイトの場合は、バグが取り切れていないことが多く、変な挙動に悩まされることが結構多いです。
ページ読み込み時にビューポートに入ってる部分に関しては、今回のtransitionバグの影響があると思いますので、遭遇することもあると思います。
