Is it just me or does Firefox have issues with smooth scrolling?

[farinspace]

http://jsfiddle.net/farinspace/praev5fq/

When I run that in FF, the pinned scene scrolls by extremely fast and kinda jumpy.

When I run it in Safari and Chrome, the scrolling stays smooth.

This seems to happen when the scene has a height of 100%

Is there a way to fix this?

[janpaepke]

for me it works smooth on all browsers.
Please note that the debugging extension is FAR from performance optimized.
I originally wrote it to use with single scenes only and I have it on my todo list to optimize performance. :)

please try and see if disabling it makes any difference.

[farinspace]

http://jsfiddle.net/farinspace/0g7x35wm/1/

disabling the debugging does not do it for me .. let me clarify a little, what I am noticing is a momentum speed increase when the pin trigger point is hit. So basically .. if i create some scroll momentum shortly above scene2 and release (e.g. the track pad), the scrollbar starts at a smooth pace, when it hits scene2 trigger point, it speeds-up/staggers a little. Again this only happens in FF for me.

I've managed to avoid the problem by doing the pinning functionality outside of ScrollMagic:

    var duration = 300;
    var setup_el = $('#setup');
    var scene = new ScrollScene({ triggerElement: setup_el.prev('.trigger'), triggerHook:0, duration: duration }).addTo(controller);
    /* */
    scene.on('enter', function(e) {
        setup_el.addClass('fixed');
        setup_el.after('<div class="spacer viewport"></div>');
    });
    scene.on('leave', function(e) {
        setup_el.removeClass('fixed');
        setup_el.nextAll('.spacer').remove();
    });
    scene.on('start', function(e) {
        if ('FORWARD' == e.scrollDirection) {
            setup_el.before('<div class="spacer"></div>');
            setup_el.prev('.spacer').css('height', duration);
        }
        if ('REVERSE' == e.scrollDirection) {
            setup_el.prevAll('.spacer').remove();
        }
    });

[joeytwiddle]

Some notes from my own animation project:

• When I scroll on Chrome, the browser does not show anything until all the Javascript has run and the visual changes have been applied to the DOM elements. If JS is slow, the display just locks up until it is done. (My JS is hooked to the 'scroll' event.)
• When I scroll in Firefox, the display updates immediately, and the browser runs JS and updates the DOM when it can get around to it. In other words, the animation driven by JS lags a bit behind the scrolling.

At least that is what the behaviour seemed like to me. It's up to the browser how to do this stuff.

How to work around this behaviour ... I'm afraid I don't have the answer! (But obviously optimizing the JS helps mitigate the issue.)

[janpaepke]

I know what's happening. It's actually a bug. I'll fix it and write more details here, when I have time.

[tysonsavage]

HI all,

Experiencing the same issue myself on FF only - has anyone found a decent temp workaround?
Much appreciated.

[janpaepke]

I plan to address this this week. I'll keep you posted.

[tysonsavage]

Brilliant - thanks.

[janpaepke]

Okay, so as promised some more info on this bug.
First I'll have to clarify.
This bug has to do with the sudden increase in momentum, best described by @farinspace.
The juggy behaviour that can be observed with the parallax example is a different issue: #167
The other issue is related to what @joeytwiddle is describing and I will elaborate more on that there.

So what's happening here?
With the last version of ScrollMagic I included a fix for the issue that if an element was pinned inside a container the events from the mousehweel would be ignored.
The reason is that if an element is pinned the browser handle the body as its parents.
So as soon at is pinned (and the mouse is over the element) the browser tries to scroll the body instead of the container.
This behaviour was first discussed here: #34
The suggested solution back then was to implement a fix yourself but as many users had this problem I decided to include a fix into ScrollMagic.
What the fix basically does is check if a mousewheel event is fired on top of a pinned element and if it is forward the scroll distance to the container.
This works perfectly for the case that caused problems earlier.
Unfortunately I forgot to deactivate this fix for the case that the container is the body, so the usual case.

In that case the event was fired twice, which was the reason for the speed increase and juggy behaviour.
Basically whenever the mouse was over a pinned element it would scroll twice as fast.
The reason it is juggy is that the forwarded event can not take advantage of the Browser's smooth scrolling implementation.
So this is a pretty big D'oh for me. ;)

I fixed this and will push a new release soon.
Thanks for the reports!

regards,
J

[bjornbjorn]

Great stuff, thanks for your effort. Looking forward to the new version! 👍

[janpaepke]

go get it while it's hot. :)