Smooth animation in Chrome, Firefox, IE, but not Safari

[SammyC123]

Is there any explanation for why that Codepen demo scrolls smoothly in Chrome, Firefox, and even Internet Explorer, but in Safari it becomes incomprehensibly jerky, making the screen bounce all around?

 

Even using 

force3D: true

 doesn't seem to make a difference (not that it necessarily should).

See the Pen qZNLKx by anon (@anon) on CodePen

[Shaun Gorneau]

It has to do with the way Safari repaints ... I've been trying to overcome this too when using ScrollMagic for multiple parallax panels.

 

One trick I've found to work well is to animate to the position being set by scroll rather than just setting the position.

[SammyC123]

It has to do with the way Safari repaints ... I've been trying to overcome this too when using ScrollMagic for multiple parallax panels.

 

One trick I've found to work well is to animate to the position being set by scroll rather than just setting the position.

 

Interesting, and thank you for the insight.

 

How does this technique affect other browsers? In other words, is this something I should be doing only when I detect the user is on Safari?

 

Likewise, what sort of animation duration do you recommend to resolve this? Can it be quick (i.e. 0.01 seconds) or does it have to be a custom solution of "this looks the best" for every use case?

 

This kind of reminds me of having to do the old CSS 3D transform trick in order to trigger GPU acceleration.

[Shaun Gorneau]

Here is a closed thread in the ScrollMagic issue queue that may offer some insight https://github.com/janpaepke/ScrollMagic/issues/167