2018-2-26

Chromeでページロード時に本来発動するはずのないtransitionが発動する

再現する状況

• 外部アプリからリンクをクリックして表示
• ブラウザは Chrome

上記２点を満たす際に、transitionが設定されているものに関して、ブラウザデフォルト値から設定値への transition が発動する

デモ

Demo

前述の通り外部アプリからのリンクでないと再現しないことに注意

解説

デモではこのような指定をしているだけです。

HTML

<p class="sample">Bug Sample</p>

CSS

.sample {
  opacity: 0;
  transition: all 5s;
}

これだけです。

本来ならページロード時、.sample完全に透明になって表示されないはずですが、「Chrome」かつ「リンク遷移」の時だけ opacity が 1 から 0 になるような transition が発動してしまいます。

どうやら 2014 年時点で類似の不具合が報告されているみたいで、かなり根深い問題の模様。

対策としては、

html.-pageLoading * {
  transition: none !important;
}

のような CSS を定義しておいて、DOMContentLoadedタイミングで-pageLoadingクラスを外すといったような方法しかない感じ。