Pins springen beim Scrollen auf voller Höhe Parallax Seite auf iOS Safari mit ScrollMagic

Question

Ich habe eine Parallax-Seite mit voller Höhe Abschnitte. Safari, Chrome und IE auf dem Desktop funktioniert die Seite perfekt. Bei einem iOS-Gerät in Safari springt der nächste Start-Pin jedoch um eine feste Größe nach oben. Ich bin nicht ganz sicher, wie man dieses Problem daher debuggt, sein Verhalten auf dem Smartphone.

Zwei Screenshots zeigen, wie der Stift aus seiner ursprünglichen Position verschoben wird.

Ich habe einen minimalen Teil des Codes ausgeschnitten, der möglicherweise unzulänglich ist, aber ich bin mehr als glücklich, dies zu füllen, wenn die Reproduktion schwierig ist.

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

CSS

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; 
} 

HTML

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

JS

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); 

Answer 1

Das Problem wurde gelöst, indem die Körper- und Profilelemente auf eine feste Höhe eingestellt wurden. Aufgrund der Art von Safari unter iOS ändert sich die Höhe, da der Bildlauf und die URL-Leiste sowie die Symbolleiste ausgeblendet sind, was zu Problemen mit den variablen Variablen für die Höhe führt.