Chrome 44のアニメーション表示のバグはベンダープレフィックスの問題

Google Chrome 44 公開

2015年7月22日(水)にGoogle Chrome 44が公開された。Chromeの場合は自動で更新されるので現在ではほとんどの方がバージョンが44になっているはずだ。

バージョンが44かどうかはChromeでURLバーにchrome://chrome/を入力すれば確認できる。

アニメーションが動作しない

バージョン44になってからサイトのアニメーションが動作しないという報告をたまに見かける。実はバージョン44からJavaScriptでアニメーションのイベントのpropertyNameをベンダープレフィックスなしで受け取るようになってしまった。

これが原因でChrome 44で閲覧した際にアニメーションが正常に動作しないサイトをたまに見かける。

propertyName使用時に発生

例えばJavaScriptで下記のようにそれぞれ-webkit-transformとtransformを指定してもpropertyNameで受け取るのはどちらもtransformだ。

そのためpropertyNameで-webkit-transformを受け取ることを前提として書かれているスクリプトだと正常に動作しなくなってしまう。

$("#test1")[0].addEventListener("transitionend", function(e) {
  $("#result1").text(e.propertyName);
});
$("#test2")[0].addEventListener("transitionend", function(e) {
  $("#result2").text(e.propertyName);
});
$("#test1").css({
  '-webkit-transform': 'translateX(200px)',
  transition: '-webkit-transform 1s ease-in-out'
});
$("#test2").css({
  'transform': 'translateX(200px)',
  transition: 'transform 1s ease-in-out'
});

試しにWebKitベースのOperaで確認するとこのようにそれぞれ-webkit-transformとtransformを受け取っていることが確認できる。

この問題はPC版のGoogle Chrome 44で発生しており、AndroidおよびiOSのChromeでは現在のところ発生していない。

transformのpropertyNameを受け取るサンプル

よくありそうな質問

アニメーションどころかサイト自体が表示されない！
Chrome 44からHTTPs Headerを常に送信する仕様変更によるものの可能性あり。今回のtransformの問題とは関係なし。

右上のユーザー名を非表示にしたのに表示される！
Chrome 44からchrome://flagsの設定表示で非表示にできなくなりました。バグとかではなく意図的な仕様変更によるもの。