FirefoxやIEでCSS3 animationがカクカクする件

やるたび後で忘れてしまうので書いとく。

CSS3のanimationとかtransitionを使って画像を平行移動させたりすると、Chromeではぬるぬる動くのに、FirefoxやIEだとカクカクしてしまう現象がある。これを直したい。

原因

ハードウェアレンダリングが有効になってない。

解決方法

CSSで動かす対象の要素に

transform: rotate(0.0001deg);

を加える。また、これでエッジがギザギザになって気になる場合は

outline: 1px solid transparent;

とする。

なんでこれでハードウェアレンダリングが動くの?

調べてみたがはっきりとしたことは分からなかった。

レンダリングエンジンの実装に依存しているのは間違いない。FFやIEのレンダリングエンジンは整数演算で済ませることができる部分は整数演算で済ませようとするらしい(つまりCPUで計算させる)。それを、rotateを指定することで強制的に浮動小数点行列演算したほうが圧倒的に早い状況を作り出して無理やりハードウェアレンダリングさせているようだ。ただ、当然ながらrotateで大きな値を指定してしまうとデザインが崩れるため、仕方なしに0.00001degなどの小さな値を指定する。(逆に言えば最初からrotateを使う場合は問題にならない)

また、translate3dを指定するとそれでも強制的にハードウェアレンダリングが有効になると書いてあったのだが、自分が試した限りでは上手くいかなかった。ブラウザバージョンによって差異があるのかもしれない。

これ等はバッドノウハウであるが、現状手軽にどうにかするにはこうするしかない。

デフォルトでハードウェアレンダリングして良いと思うんだけどねぇ。あえて遅いCPUを使っているのは何かしらの理由があるんだろうけど。