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

Question

我有一个全高部分的视差页面。桌面上的 Safari、Chrome 和 IE 页面运行完美。但是，当在 iOS 设备上的 Safari 中查看时，下一个起始图钉会向上跳跃一个固定大小。我不太确定如何调试此问题及其在智能手机上的行为。

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

我删掉了一小部分代码，这可能是不充分的，但如果复制困难，我很乐意补充这一点。

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

通过为 body 和 section 元素设置固定高度解决了这个问题。由于 iOS 上 Safari 的特性，当您滚动时，高度会发生变化，并且 url-bar 和工具栏会折叠，这会导致响应式高度变量出现问题。