Jumpy, choppy transform translate on Safari 8 and Chrome 43

Question

I've been encountering the same problem for weeks and did not find the answer yet. So here is my problem : I have to make an animation in order to scroll the image depending on your mouse position. I'm using transform: translate3d() but I tried with translate and translate2d with the same result.

This animation works perfectly on Safari 5 / 6 / 7 and Firefox. On Chrome and Safari 8, it's jumpy. In fact, it's not smooth.

Do you guys have any idea ?

Thanks a lot !

Answer 1

The later webkit browsers tend to do 3d transforms better than 2d transforms, so you really need to make sure that your translates are 3d.

If you look at your images, they contain inline styles, and have transform: translate() as one of the properties. And the inline styles are overwriting your CSS, including transform: translate3d(), which is why you find no difference no matter what you put in your CSS.

What you need to do is to either use CSS (recommended) or inline styles - having styles all over the place is messy.