【CSS3】 iPhone では、position より transform:translate() の方が再描画コストが安い？

ちょっと前の記事で、border-image を使うと iPhone の Mobile Safari のアニメーション処理がカクカクになってしまうという実験をやったが、今回はそれの続きで、iPhone で、重ねて表示したレイヤーにスライドアニメーションを適用する場合の再描画処理についての実験。
題材は、前回の実験のパフォーマンステストGを掘り下げた感じ。

仮説

次の仮説について検証してみた。

position+top+left だと要素自体を移動させるために他要素への影響があり得るが、transform:translate() だと影響範囲を要素内だけと完全に限定できるため、再描画コストが安くすむ。

実験

今回実験用に用意したHTMLはこちら。

パフォーマンステストAは position と top を操作してパネルをスライドさせている。パフォーマンステストBは期待される動作はAと同じだが、 transform:translate() を使って実装したもの。

iPhone 3GS + iOS4 + Mobile Safari(AppleWebKit 532.9) で動作実験をしたところ、次のような結果。

パフォーマンステストA

重くなる。

パフォーマンステストB

スムーズに動作する。

結論

動作のスムーズさに明確な違いが現れた。仮説は正しかったように見える。

iPhone 3GS しか手元にないため iPhone 4 では確認していないが、おそらく、より歴然と差がつくのではないだろうか。 (前回の実験で、Retinaディスプレイの iPhone 4 は、 iPhone 3GS より再描画に時間がかかるという結果が出ている)

気をつけたいのは、今回のように、得られる効果が同じでも実装の仕方が複数あるという場合に、「効果そのもの」よりも、それが「どういう意味の効果なのか」を正確に考慮するべき、ということか。ぱっと思いつかないけど、同様のケースが他にもありそう。

やっぱり iPhone はよく考えて作られてるなぁ、という印象を強めた結果だった。