在使用ScrollMagic的iOS Safari上滚动全高视差页面时，引脚会跳​​跃

Question

我有一个全高度部分的视差页面。桌面上的Safari，Chrome和IE页面完美运行。但是当在Safari中的iOS设备上查看时，下一个启动引脚向上跳跃固定大小。我不太清楚如何调试这个问题，因此它在智能手机上的行为。

已包含两个屏幕截图，以显示引脚如何从其原始位置移位。

我已经删除了可能不足的代码的一小部分，但如果复制很困难，我非常乐意填写此代码。

小提琴：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

通过为主体和截面元素设置固定高度来解决问题。由于iOS上Safari的性质，当您的滚动和网址栏和工具栏折叠时，高度会发生变化，从而导致响应高度变量出现问题。