iOSのcanvasがめっちゃ重い!

iOSのsafariでcanvasの操作がめっちゃ重い!解決策。
具体的には、このような症状。

  • iOS6系
  • もともと、position:absolute; 指定している。left と top を、setInterval()にて細かく設定。(動いているように見せる)
  • けっこう巨大なcanvasです
  • 測定してみると、CSS への設定は一瞬で終わっておりボトルネックでは無いように見えるが、画面がカクカクする。
  • iPhone5 では全く問題無いが、iPad mini だけ激重・・・。なぜiPadだけ・・・。

下記のようなCSSで解決した。

canvas {  
-webkit-backface-visibility: hidden;
}

よく理解できないが、GPUが有効に活用されるっぽい。
backface (裏面)を非表示にする設定。
同じiOSでもデバイスによって重かったり軽かったりするのは、バッファまわりの設定や実装がデバイス毎に異なっているからだろうか・・・。

参考サイト
http://havelog.ayumusato.com/develop/performance/e554-paintgpuacceleration_problems.html