表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか？」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。
原因
既に数名の方から本件に関するお問い合わせを頂いています。結論から言うと 長く続いているGoogle Chromeのグリッチ(不具合) で、ブラウザデフォルトUAと異なるスタイルが充てられており、かつ、transitionが指定されている要素 が引き起こすものです。
Chromeというか Chromium系ブラウザ なので、レンダリングにChromiumエンジンを採用しているブラウザ全般です。Brave, Vivaldi, Microsoft Edge なんかが該当します。
なかなかタイミングが合わずわかりづらいキャプチャになってしまいましたが、初回表示時のものです。サンプルのテンプレートはサイドメニューが右側開閉のドロワーになっており、初期状態では閉じているのが正常です。ところが一瞬現れてからスーっという感じで右に格納されます。他にも表示されているべきSNSアイコン郡が無かったり、オーバーレイのようなものがチラっと見えていたりします。
このグリッチの本質が何なのか、という点ですが、サンプルキャプチャのドロワーを例にすると、サイドメニュー部に transform: translateX(100%) を指定して、サイドメニューの横幅分を右側に移動、つまり画面の右外に追い出すことで『格納状態』を作り出しています。ハンバーガーボタン(開閉ボタン)がクリックされた時に、この transformX の値を 0 に戻すことで『展開状態』になります。画面内に戻ってくるわけですね。
CSSの transformX のデフォルト値は 0 です。テンプレートの表示時の初期状態として値に 100% を指定しています。そして開閉時は円滑な動きになるように transition: .5s ease-out も指定してあります。Chromiumはこれらに対し『ブラウザデフォルトUA(CSS初期値) → 初期値変更』という流れにもtransitionを適用させてしまいます。
CSSの仕様と照らしても正しくない挙動なので、Chromiumのグリッチと断定して良いと思います。かれこれ4〜5年ぐらい続いているような。どこかのバージョンで一旦修正されたように思うのですが、すぐに再発した。フォーラムでも度々指摘されているけれど一向に直る気配もなし。
念のため transition というのは以下のようなものです。2つのうち左側のみ transition: background .5s ease-in-out を指定しています。マウスホバーで確認できます(PC推奨)
ブラウザ初期値と異なる値 + transitionが指定されている
という組み合わせの全てで起こりますので、例えばフォントの大きさやリンクの色やその他諸々とにかくtransitionがかけられているものは尽く対象になります。
対処法
- Chromiumの修正を待つ
- transitionを利用しない
- JSによるハック(hack)
実質③の方法しかないですよねぇ (∵`)
修正に期待しつつ、それまではハックで凌ぐ、みたいな。昔はIE用のハックやらフォールバックやらを大量に導入せざるを得ずムキー (;`ｰ´)o とかやってましたがChromeでもやらなあかんのかい(笑)
transitionを利用しないとなるとなんでもかんでもパッと切り替わったり動いたりするので情緒の無いページになってつまらないですしね。というわけで対処法は JavaScriptを用いてページロード時はtransition実行を防ぐ というものです。
bodyへのclass付加及び削除だけなのでコード自体は簡単です。HTML追加とCSSも追加も必要です。いずれも簡単なものですが、CSSの方はユニバーサルセレクタを利用するのでなんか嫌だなぁと個人的には思います ^^;
HTML追加
どのテンプレートでも共通で必ずあります。<body で検索するとテンプレートHTMLの上の方に1箇所あるはずなので、以下のようにします。
<body class="gc_hack"><body> ではなく <body と、右のブラケット無しで検索してください。元々classやidが付いているとヒットしなくなって混乱しますので。
元々classやidがある場合は以下のようにします。
classあり
<body class="xxx gc_hack">idあり
<body id="xxx" class="gc_hack">class, idあり
<body id="xxx" class="yyy zzz gc_hack">gc_hack でわかりにくければ他の名称に変更しても構いません。自身で『何故付け足したのか』がわかるようにしておきましょう。
CSS追加
テンプレートスタイルシートの最終に以下の内容を追加
/* chromium用hack */
.gc_hack * {
transition: none !important;
}JS追加
テンプレートHTMLの </body> の直前に以下の内容を追加。
<!-- Chromium用hack -->
<script>document.addEventListener('DOMContentLoaded',function(){document.body.classList.remove('gc_hack');});</script>まとめ
古い時期にリリースしたテンプレートのUIを見直しています。あまり時間が取れないので少しづつですが、現在の特に モバイルユーザビリティ に合っていない部分や、IE対応の廃止などを行います。その際には本記事内容も追加する予定なので、自分でやるのは心配だという方は新しいバージョンをお待ち下さい。ただしモバイルユーザビリティ面の調整なので、テンプレートによってはアイコンの大きさなど、現在のものと大きく異なる形状になったり、位置が変更になったり、class名が変更や追加になったり、という可能性がありますので、ゴリゴリにカスタマイズしており変更が難しい場合は本記事内容をご自身で行ってください。
比較的最近リリースしたテンプレートで、ページ表示時にスプラッシュやローディングのオーバーレイを経由するものがあります。これらについては、それ自体がChromiumグリッチへの対策でもありますので本記事内容を無理に実行する必要はありません。
There are no comments yet.