translate3dは曲者臭い

html5/css3でコンテンツ作成してスマホで確認したりしてます。

まぁ前々から怪しいとは思っていたんですが、translate3dについてちょっと見えてきたのでメモ。


サポートしているデバイスではGPUで演算されるというところまでは知っているんですが、その内部処理まではよく知りません。androidならソース読めばある程度解るのかもしれませんが、ちょっと色々ね。まぁ面倒でそこまではまだちょっと。


iOS系はちょっと違うようですが、どうもAndroid系はtranslate3dで指定された要素の座標変換をやってるんじゃなかろうかと。で、translate3dされた要素はページ自体とは別の座標軸を持つことになり、結果描画のたびに基本座標からの位置評価と座標変換の２つ処理が別べつに走っているように思えます。少なくともmarginとは別評価な気がする。


例えばGalaxy nexus(4.0)で、上下スワイプでmarginを操作してスクロール出来るようにしたレイヤーに、translate3dを当てた要素を載せたページを見ると、他の要素とはバラバラに移動して見えるんですよね。

これって２つのCPUとGPUの時間的同期が取れないから瞬間の描画している座標位置にずれがでてるんじゃないかなぁ？


他にもtranslate3dでアニメーションさせると画像がちらついたり、translate3dが設定されている要素にあたるカーソル位置もおかしくなったり色々あるんですよね。


いずれにせよ、ウェブコンテンツのアニメーションにtranslate3dを使う時は注意したほうがよさそうです。