Pins are jumping when scrolling on full height parallax page on iOS Safari with ScrollMagic
<p>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.</p>

<p>Two screenshots have been included to show how the pin is displaced from its original position.</p>

<p>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.</p>

<p>Fiddle: <a href="https://jsfiddle.net/utz97at6/" rel="nofollow noreferrer">https://jsfiddle.net/utz97at6/</a></p>

<p>CSS</p>

<pre><code>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;
}
</code></pre>

<p>HTML</p>

<pre><code>&lt;section id="section1"&gt;&lt;/section&gt;
&lt;section id="section2"&gt;&lt;/section&gt;
</code></pre>

<p>JS</p>

<pre><code>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);
</code></pre>

<p><a href="https://i.stack.imgur.com/xPX25.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xPX25.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/QZZl8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZZl8.png" alt="enter image description here"></a></p>