Safari Parallax (demo and real-live code) looks super juggy

[nexflo]

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

Your demo in safari...looks extremly jumpy/jiggy/whizzy or just unsmooth (butter smooth in chrome)

[coolheinze]

This seems to be a general issue on Safari (at least on Mac - iOS looks okay-ish). The http://janpaepke.github.io/ScrollMagic/ demo looks awful as well, which is a shame, 'cause it used to look so awesome! :o( Might be a recent Safari update.

[cnewfeldt]

I'm seeing the same thing on Safari and Firefox. Chrome is fine.

[josephniet]

OS: OSX 10.9.5
Firefox v32.0.2 - fine
Chrome v37.0.2062.122 - fine
Safari v 7.1 (9537.85.10.17.1) - juddery (like it momentarily gets reset/goes backwards sometimes?)

[coolheinze]

Safari Version 7.1 (9537.85.10.17.1): Noticed problem pinning. Seems like the pinning spacer has some lag that could cause the judder. Making an element inside the pinned stuff fade in simultaneously made it smooth...? Could be Safari trying to optimise something, which gets a little too optimised.

BTW: Is this a GreenSock issue rather than ScrollMagic?

Update:
Nopes, still judders despite the fading thing. My apologies.
Also, if the spacer is causing the problem, this issue is probably not related to GreenSock.

[janpaepke]

I know what is causing this issue and was already made aware of it by @Ihatetomatoes.
I'm quite sure I know what's causing this: to save on performance ScrollMagic doesn't always update on scroll but on tick.
But even though the tick is tested on scroll and should occur before redraw, sometimes there can be delays between the scroll and the actual update of ScrollMagic.
That is why the position is wrong.
I noticed this and asked about this penomenon on stack overflow a while ago:
http://stackoverflow.com/questions/25685608/why-is-an-interval-function-executed-before-an-event-callback

I don't want to get into this too much, but I already have an idea how to address this.

I'll keep you posted.
Thanks for the reports! :)

regards,
J

[janpaepke]

Oh, and it's definitely not a GSAP issue.

[janpaepke]

All right,I fixed it.
Chrome and Firefox are buttersmooth now.
Safari can sometimes still be a bit jittery, but this depends on how much is redrawn at once.
At the moment I have no idea how to make it as perfect in Safari as it is in Firefox an Chrome.

Anyway: While I was at it, I also changed the parallax sections example.
Instead of moving the background I now move the position of a child element.
This has the benefit that I can use percentages and so in responsive environments you wouldn't have to modify the tween if the container's size changes.

I will push the update in the next couple of days.

[janpaepke]

go get it while it's hot. :)