-webkit-transform: transfer block rendering to iPad

Question

So, I understand that translate / translate3d uses a GPU, but for some reason it causes a lot of graphics to display in blocks / pieces on the iPad. I have difficulty finding anywhere where the maximum width / height for images is when using translation.

I would really like to use css transitions in the transform property, but I can not because of this problem. Even css transitions in the "top" property are slower than using jQuery.animate ().

Any advice on this?

Answer 1

I had exactly the same problem, and I had great success with this little CSS gem:

-webkit-backface-visibility: hidden; 

I found that adding this to any element that was animated allowed for "block" rendering. In some cases, I also had to add it to child elements, for example. I had a large wrapping div, and I used translateX to adjust the x-position. I added a CSS magic string to the div wrapper, as well as the direct children of that div (which were my content areas). Play with him, and you hopefully figured out!