お問い合わせはコチラから

Chromeでページ読み込み時にtransitionが動いてしまう件の対策

サイト運営

とあるサイトで、スマホのハンバーガーメニューで表示に不具合がありました。

初期状態では、メニュー本体はtransformで画面外にあり、ハンバーガーメニューがクリックされるとtransformを解除してスライドイン、その際、transitionでアニメーションさせている。というような構成でした。

Chromeでページ読み込み時にハンバーガーメニューをクリックしていないのに、メニューが一瞬表示されてしまうというもので、CSSのtransitionが原因のように見えました。

Chrome特有のバグらしい

外部スタイルシートに CSS transition を記述した際、仕様上は初期状態への遷移は発生しないはずなのだけれど、Chrome だと、デフォルトのスタイルから初期状態への遷移が発生してしまう、という問題。

https://qiita.com/nagtkk/items/27ff4f2fe17746afabdd

Chromeでページ読み込みした時に、transitionが動いてしまうのはChrome特有のバグということでした。

Chrome の CSS transition がページロード時に動いてしまう問題の機序と対処 - Qiita
TL;DR外部 CSS を読み込んだら、何かしらスクリプトを走らせよう。前置き外部スタイルシートに CSS transition を記述した際、仕様上は初期状態への遷移は発生しないはずなのだけ…

外部スタイルシートが読み込み時にすぐに適用されないというのが原因らしいです。

対策:外部スタイルシートを読み込んだ後に何らかの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バグの影響があると思いますので、遭遇することもあると思います。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました