Pin Jitter on Safari and Firefox

[jessicaleyland8]

I am trying to pin multiple sections to the top of page one after the other. Like your simple pinning example. This works fine on chrome but on safari and firefox whilst the section is pinned and you scroll it causes a jitter which ruins the smooth flow of the page completely. Any ideas why this could be?

[drwlrsn]

I just want to reinforce that I see this too. On the sticky elements demo page I see jitter in Firefox 36.0.

[discern]

I am having similar issues since upgrading to 2.0. In Firefox and Safari (OS X 10.10.2), elements inside a pinned element experience rather severe jitter while scrolling. It seems to be more pronounced if the element is tweened in vertically, rather than horizontally. But it is still jittery if tweened in horizontally.

Screencast

[austinhulak]

I'm here to confirm that I am seeing this as well, seems more pronounced on firefox, although definitely still present on safari as well

[krnlde]

Possible duplicate of #247 #218 #186 #167

[pvmsikrsna]

I also found the same problem in firefox 36.0 since I upgraded to version 2.0

[lamtha]

1.3 wfm, but upon upgrading to 2.0.0, I'm now getting this behavior.

This is a regression, not a dupe of #186 or #167 as they refer to a safari specific problem on an older scrollmagic.

[discern]

If you need a workaround until it gets fixed, try commenting out lines 1892–1904 in scrollmagic/uncompressed/ScrollMagic.js.

This solved it for me, but your mileage may vary. I am still, however, having a separate, and very severe rubber band issue in IE11 only.

var
fixedPos = _util.get.offset(_pinOptions.spacer, true),
    // get viewport position of spacer
    scrollDistance = _options.reverse || _options.duration === 0 ? containerInfo.scrollPos - _scrollOffset.start // quicker
    : Math.round(_progress * _options.duration * 10) / 10; // if no reverse and during pin the position needs to be recalculated using the progress
// add scrollDistance
fixedPos[containerInfo.vertical ? "top" : "left"] += scrollDistance;
// set new values
_util.css(_pin, {
    top: fixedPos.top,
    left: fixedPos.left
});

[tombennet]

I'm seeing this too, running Firefox 36 on OSX 10.10.2. Pinned elements experience severe jitter while scrolling. This was not a problem on 1.3.0, and arose when I upgraded the page to 2.0.0.

[pvmsikrsna]

@discern Your temporary fix works in firefox when the elements are pinned to the top of the viewport but not when they are offset from that top.

[discern]

Good to know. Yes, I was experiencing the issue within a pinned, full-viewport scene. It's just a temporary workaround for limited cases. Hopefully, @janpaepke or another contributor can will come up with a permanent solution.

[mark-youssef]

Commenting out lines 1892–1904 broke the centered pinned effect for me, so I tried something else and it seemed to fix it. I moved that block into the previous if statement that executes if the pinned element is being switched back to its fixed position:

// pinned state
if (_util.css(_pin, "position") != "fixed") {
    // change state before updating pin spacer (position changes due to fixed collapsing might occur.)
    _util.css(_pin, {
        "position": "fixed"
    });
    // update pin spacer
    updatePinDimensions();

    var
    fixedPos = _util.get.offset(_pinOptions.spacer, true),
        // get viewport position of spacer
        scrollDistance = _options.reverse || _options.duration === 0 ? containerInfo.scrollPos - _scrollOffset.start // quicker
        : Math.round(_progress * _options.duration * 10) / 10; // if no reverse and during pin the position needs to be recalculated using the progress
    // add scrollDistance
    fixedPos[containerInfo.vertical ? "top" : "left"] += scrollDistance;

    // set new values
    _util.css(_pin, {
        top: fixedPos.top,
        left: fixedPos.left
    });
}

It seems that the problem is that block is updating the fixed position EVERY time you scroll which is causing the jittery behavior. If someone can confirm that this fixes the issue in their case as well, I'll go ahead and make a pull request.

[tombennet]

@Unireverse Can confirm that your fix works for me too - moving that block into the previous IF statement prevents the jittery behaviour in both Firefox 36 and Safari 8.0.3. Thanks!

[janpaepke]

Sorry for the delayed answer, I was on holidays...

The position needs to be updated, because in some cases it may change (parent elements, resizing or pinning elements within containers – it should move with dom, if window is scrolled, but be fixed, if container is scrolled).

In theory if nothing changes the result of the calculation should always be the same and no jitter occur.
I remember struggling with this on version 1 as well, So I'm sure I'll be able to figure it out here...

I'll try to get on it asap.

[pvmsikrsna]

@Unireverse Your move works for me. Tested on Safari 5.1.7, IE 11 , and Firefox 36.0. But what I observed is a little jump before the element gets pinned on these browsers. No issues on Chrome.

[discern]

Welcome back to the fray, @janpaepke!

This works in my situation as well. I, too, am getting the jump (with our without this fix), and it is extremely severe (but off-topic) in IE 11. In other browsers it is minimal, but noticeable. Thanks!

[mark-youssef]

@janpaepke I see what you mean. The position does need to be updated. I found a bug with my fix where the pinned element gets misplaced if the user scrolls too fast in my case.

[janpaepke]

So it turns out this was something I originally first observed quite a while ago:
http://stackoverflow.com/questions/25685608/why-is-an-interval-function-executed-before-an-event-callback

Apparently because of the loose way browsers handle the scroll event callbacks sometimes there is a discrepancy between the time ScrollMagic updated the scroll position (onscroll) and when it actually updates the scenes (on rAF).
This discrepancy only occurs when using a trackpad or a mouswheel, not when using the scrollbar.
So it's basically something that happens because of the internal implementation of smooth scroll or inertia inside of browsers.

The obvious solution is to also update the scroll position on rAF, right before the scenes are updated.
This solves the pin jitter in FF and potentially also resolves some issues raised regarding parallax jitters (at least for me it does).

I will release an update soon.

Please confirm:
Does this solve the pin jitter for FF for you?
Does this solve the pin jitter in IE for you?
Does this resolve the parallax jitter in FF/IE?

[janpaepke]

New version is released: https://github.com/janpaepke/ScrollMagic/releases/tag/v2.0.1

Let me know if that does anything. :)

[mark-youssef]

I can confirm this solves the pin jitter in FF/IE for me. Thanks!

[tomothumb]

Great solution. It worked on Firefox(Win/Mac) in my virtual machine. Thanks.

[BenjaminBeck]

Thanks for the fix!
I can confirm 2.0.1 solves it for FF 36.0.1 on OSX 10.10.2

[DarthJay]

Works like a charm now. Thanks so much!

[baseman66]

On Windows 8.1 IE11 does not work. Jitter in example parallax sections still there. No fix.

[meetpilou]

I have this problem on Windows 8.1 IE11 too. I'm working with the last version of scrollmagic.
Does any fix for this ?

Thx

[infn8]

I noticed this as well. actually this happens https://www.youtube.com/watch?v=0jF8Nw5VjQw when the position changes from relative to fixed during an inertial scroll iOS webkit will stop painting the item until the inertial scroll finishes. Ugly. here's the fix. Apply a 3d translation to the pinned item. it doesn't need to go anywhere but a translation has to happen.

.scroll-pin{
    transform: translate3d(0,0,0);
}

and that totally kills the iOS jitters (in my tests on iOS 9 anyways)

[sebastianjung]

I was about to rip my hairs off, when i realized the jumping of the pinned section on IE was triggered by the addIndicators Plugin of Scrollmagic.

Disabling those might work.

Hope this helps!

[zucoa]

@janpaepke
Hello - love using this so a big thank you! I'm using v2.0.6 and notice this jitter in FF, IE and Edge. I removed the indicators per the last post, but still get the jitter. When using the section wipes demo in these browsers and the scroll mouse, the words will hop/move/jump. Is there something that can be done in the latest version to fix?
http://scrollmagic.io/examples/basic/section_wipes_natural.html

[Nishant-Rana]

Have an issue on safari on laptop jerky effect on the sllides and circles while to setpin

http://milagro.in/wip/milagro-new/

[camo81]

Same issue for me on 2.0.6 with and without addIndicators plugin (only in FF and edge). You can see it live here: https://www.bluegrasseagle.com/defend-your-passion/facing-finale