So I understand that translate/translate3d utilizes the GPU, but for some reason it is causing large graphics to render in blocks/chunks on the iPad. I'm having difficulty finding anywhere that states a maximum width/height for images when using translate.
I'd love to be able to use css transitions on the transform property, but can't because of this issue. Even css transitions on the 'top' property are performing more slowly than using something like jQuery.animate().
Any advice on this?
I had exactly the same problem, and had a lot of success with this little CSS gem:
I found that adding this to any element that was being animated resolved the "blocky" rendering. In some cases I also had to add it to child elements, eg. I had a large wrapper div and was using translateX to adjust the x-position. I added the magic line of CSS to the wrapper div, and also the direct children of that div (which were my content areas). Have a play around with it and you'll hopefully get it sorted out!