Jumpy, choppy transform translates to Safari 8 and Chrome 43
I have been facing the same problem for several weeks and have not found an answer yet. So here's my problem: I have to make an animation to scroll the image depending on the position of the mouse. I am using transform: translate3d (), but I tried with translate and translate2d with the same result.
This animation works great on Safari 5/6/7 and Firefox. In Chrome and Safari 8, this is hesitant. In fact, this is behind the scenes.
Do you have any ideas?
Thank you so much!
source to share
More recent webkit browsers tend to do 3D conversions better than 2d conversions, so you really need to make sure your translations are 3d.
If you look at your images, they contain inline styles and have transform: translate()
one of the properties. And inline styles overwrite your CSS including transform: translate3d()
, so you don't find a difference no matter what you put in your CSS.
What you need to do is use CSS (recommended) or inline styles - styles are all over the place.
source to share