Scrollmagic: Pins are jumping when scrolling on full height parallax page on iOS Safari

[maziarz]

I have a parallax page with full height sections. Safari, Chrome and IE on Desktop the page works perfectly. But when viewed on a iOS device in Safari the next start pin is jumping a fixed size upwards. I am not quite sure how to debug this problem hence its behaviour on the smartphone.

I have cut out a minimal part of the code which may be inadequate, but i am more than happy to fill this in if reproduction is difficult.

Fiddle: https://jsfiddle.net/utz97at6/

html, body {
    height:100%;
    height: 100vh;
    width: 100%;
    font-size:100%;
    background-color: #000;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

section {
    min-height: 100%;
    min-height: 100vh;
    min-width: 100%;
    background-color: none;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    <section id="section1"></section>
    <section id="section2"></section>

var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onLeave", duration: "100%"}});
    var tween = new TimelineMax();

    new ScrollMagic.Scene({triggerElement: "#section1", triggerHook: 0})
    .setTween(tween)
    .setClassToggle('#anchor1', 'active')
    .addIndicators()
    .addTo(controller);

    new ScrollMagic.Scene({triggerElement: "#section2", triggerHook: 0})
    .setTween(tween)
    .setClassToggle('#anchor2', 'active')
    .addIndicators()
    .addTo(controller);

[silverbackis]

Hi Maziarz,

I've been having this problem for a while too and found a solution. I'm not sure if there will be any other side-effects to other users but in the un-minified version, I updated line 164 to this:
return _options.vertical ? (_options.container===window ? _util.get.height(document.body,true) : _util.get.height(_options.container)) : _util.get.width(_options.container);

It had been this:
return _options.vertical ? _util.get.height(_options.container) : _util.get.width(_options.container);

Basically for vertical scrolling, instead of getting the window inner height, we get the body outer height which means the value doesn't change as the URL bar and the navigation bar disappear.

I hope it works for you and anyone else who may come across this issue.

[javierocanas]

Hi ghost,

This works perfectly to me, you should open a PR.

[thegeminisociety]

Has anyone tried ghost's solution on the recent build? I tried swapping those lines and am getting very odd results. Anyone have another solution for this?

[Republicof1]

Hi thegeminisociety,

I was having a very similar issue, I surmised it probably had something to do with the auto-hiding navbar in iOS browsers.

I've copied in Ghost's fix and it works perfectly for me in iOS Safari (using SM vers 2.0.5), but the problem persists on iOS Chrome and iOS Firefox. I expect these browsers are handling their height properties differently.

It will more-than-likely still be a fix involving the same line. I'll post up any refinement if I succeed.

Out of interest what results were you seeing?

[matthew-valenti]

I have a long page with several pinned elements that jump on ios only. This patch didn't work for me and results in super slow scrolling behavior on the pinned element.

[JoshWeb]

Ghost's solution worked perfectly for me, it fixed scrolling issues on iOS with setPin().

[piersrueb]

Ghost's solution only works if the disparity between your window inner height and body outer height is not too great. If you have a tall page you'll experience what Mathew Valenti described where you'll scroll forever on a pined element.

I'm guessing this issue is most likely caused by the inner height changing as the UI collapses on IOS safari as you scroll up a page triggering a resize function within Scrollmagic.