translate3d等コンポジションレイヤー上で動作するプロパティ(いわゆるGPUレンダリング用のレイヤーに配置される)を使っても、
上記を適用した要素がページ内に大量にある場合などはモバイル環境で結構ガタつくケースがある。
そんな時の応急処置をメモ。
出来るだけposition: relativeを使用しない
position: relativeによるレイヤー生成がコンポジションレイヤーとバッティング?してるイメージなのか、デバッガーでコンポジションレイヤーを表示して確認するとアニメと関係ない要素(position: relativeが使用されているレイヤー)までレイヤー上に配置(描画)されるのでposition: relativeを出来るだけ使用しないほうがいいみたい。組み方的にposition: relativeを取れない場合
z-indexを指定してあげる。いやz-indexも指定してるけど。。。
-webkit-backface-visibility: hiddenや-webkit-transform: translate3d(0,0,0)等のハックを親要素などにも使う。場合によってはCSS3アニメにこだわらずJSでアニメ、もしくはスプライトシート等の選択肢も考える
発想の転換も必要。ケースバイケース。