使用 ScrollMagic 在 iOS Safari 上滚动全高视差页面时，图钉会跳动

Question

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

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

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

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-栏和工具栏会折叠，这会导致响应高度变量出现问题。

使用 ScrollMagic 在 iOS Safari 上滚动全高视差页面时，图钉会跳动

Pins are jumping when scrolling on full height parallax page on iOS Safari with ScrollMagic

javascript

safari

jquery

ios

scrollmagic