そのため、translate/translate3d が GPU を利用していることは理解していますが、何らかの理由で、大きなグラフィックスが iPad のブロック/チャンクでレンダリングされています。翻訳を使用する場合、画像の最大幅/高さを示す場所を見つけるのが困難です。
transform プロパティで CSS トランジションを使用できるようにしたいのですが、この問題のために使用できません。「トップ」プロパティでの CSS トランジションでさえ、jQuery.animate() などを使用するよりも実行が遅くなります。
これに関するアドバイスはありますか？
私はまったく同じ問題を抱えていて、この小さな CSS gem で多くの成功を収めました。
-webkit-backface-visibility: hidden;
これをアニメーション化されている要素に追加すると、「ブロック状」のレンダリングが解決されることがわかりました。場合によっては、子要素にも追加する必要がありました。大きなラッパー div があり、translateX を使用して x 位置を調整していました。CSS のマジック ラインをラッパー div に追加し、その div の直接の子 (コンテンツ領域) も追加しました。それをいじってみてください。うまくいけば、それが整理されるでしょう!