ミギムキ

IE11でハマったことまとめ

CSS

「animation」が動作しない

.anime { width: 50px; height: 50px; background-color: #888; animation: scale_anime 1s linear 0s infinite normal both running; } @keyframes scale_anime { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } }
スポンサー広告
  • 何の変哲もないように見える「animation」プロパティですが、IE11では動作しません
animation: scale_anime 1s linear 0s infinite normal both running;
  • 「animation」でまとめて設定しているプロパティのうち「animation-play-state」である「running」を消すとIE11で動作するようになります
animation: scale_anime 1s linear 0s infinite normal both;
  • 「running」は初期値です。初期値を再設定しているだけなのになぜ動作がおかしくなるのか

Javascript

「for...of」が使えない

const buttons = document.getElementsByClassName('button'); for(const button of buttons) { /* ループ処理 */ }
  • インデックス情報なしで配列ループできる便利な「for...of」ですが、IE11では動作しません
  • エラーも出ずにただ動かないだけなので、ぱっと見どこで何がコケてるのかわかりにくくて厄介です
  • 無念ではありますが、普通のforで配列ループを回します
const buttons = document.getElementsByClassName('button'); for(let i = 0; i < buttons.length; i++) { /* ループ処理 */ }
スポンサー広告

addEventListenerの中でイベント設定先の要素をそのまま呼ぶのはNG

const buttons = document.getElementsByClassName('button'); for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function(event) { const dataType = buttons[i].getAttribute('data-type'); }, false); }
  • これは自分の書き方も悪いので両成敗
  • addEventListenerの中でリスナーを呼ぶときはちゃんと「this」を使おう、という当たり前の話
  • これも何も言わずにひっそり死んでしまうパターンなので、問題がわかりづらいです。君は鈴井貴之か
const buttons = document.getElementsByClassName('button'); for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function(event) { const dataType = this.getAttribute('data-type'); }, false); }

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告