IE11でハマったことまとめ

もうそろそろ放おっておきたいIE11。でもまだまだユーザーはいるということで無視できません
そんな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です。