safariでCSSアニメーションがカクついた時の対処法

クロスブラウザテストをした際、SafariだけCSSアニメーションがカクついてうまく表示されない場合があります。今回はその実例を示した後に原因を解説し、解決策を2つに分けて説明します。

解説にあたって

例として以下のようなマウスストーカーを考えます。

See the Pen Untitled by Ryoh96 (@ryoh96) on CodePen.

ほとんどのモダンブラウザでは特別な指定をしなくてもデモのように動きますが、SafariではCSSに気を付けないとアニメーションがカクついてしまいます。

解決方法

CSSで必要なプロパティの指定をすることで解決します。指定するプロパティは2点です。

コードで表すと次のようになります。

  //1
  transform: translateZ(0); // or will-change: filter;
  //2
  transition: transform 0.2s;

解説

ハードウェアアクセラレーションを使う

will-change: filter;もしくは transform: translateZ(0);を指定するとハードウェアアクセラレーションが有効になり、GPUを使って描画が行われます。指定しなかった場合は以下のようになります。

赤い色はリペイント処理が走っていることを表しています。
また同時に、マウスカーソルの軌跡が描画されたままになってしまう不具合も生じていることが分かります。

transitionを指定していない場合は、この指定だけでカクつきが解決します。

transitionプロパティをきちんと指定する

例えばtransformプロパティにトランジションを指定する場合、きちんと transition: transform ~ ;とします。transformを省略(規定値のall)にするとかなりカクつきます。

まとめ

safariでCSSアニメーションがカクつく原因を解説し、その対処方法を2つ説明しました。
ハードウェアアクセラレーションを有効にすること、transitionプロパティをきちんと指定することを覚えておいてください。