2016-02-09

IE11 でページ読み込み時に Media Queries と transition を併用した要素がアニメーションしてしまう

メディアクエリを使って、幅○○px以下はメニューの形を変える、みたいなスタイルを書いておいて、その要素に transition を振っておくと、ウィンドウをリサイズした時にアニメーションしながら要素のスタイルを変更させることができる。

分かりやすくするとこんな感じの CSS。

html,
body {
  width:100%;  /* viewport 対策 */
}

.logo {
  font-size:300%;
  transition:0.5s;
}

@media screen and (max-width:800px) {
  .logo {
    font-size:120%;
  }
}

もちろん HTML には <meta name="viewport" content="width=device-width, initial-scale=1"> を指定している。

このような CSS だと、.logo はウィンドウ幅が 800px 以下になったところでフォントサイズがアニメーションしながら小さくなる。ウィンドウを広げればアニメーションしながら元のフォントサイズに戻る、こういう寸法だ。

自分の Firefox 43 と Chrome 47 ではこれで何ら問題なかったが、IE11 でのみ、ページ読み込み時にこのメディアクエリと transition が併用された要素の表示がおかしくなった。具体的には、ページ読み込み時に一瞬メディアクエリ内のスタイルが適用され、そこから元々のスタイルに戻る、という挙動になるのだ。ページを読み込むたびに、.logo のフォントサイズが小さいところから大きくなるようなアニメーションを起こす。

実際はサイトのレイアウト指定に使っていたので、このような動きをされると気持ち悪い。ということで解決法を探した。

案外見つからなかったが、1件だけ StackOverflow がヒットした。

参考 : IE11 triggers css transition on page load when non-applied media query exists - Stack Overflow

このページによると、

@media screen and (max-width:800px) {

この部分を、

@media screen and (min-width:1px) and (max-width:800px) {

と、このように、1px 以上かつ 800px 以下、といったようなメディアクエリにしてやると問題がなくなるらしい。

やってみると確かに、IE11 でも初期表示時にアニメーションが発生しなくなった。

しかし、メディアクエリが有効になるぐらい狭いウィンドウ幅の時に初期表示すると、メディアクエリ指定がないスタイルからメディアクエリで指定したスタイルへとアニメーションする動きは直らず。

結局 IE11 だけでクソな状態になるだけだもんなー、と思って対応はココまでにした。