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

【问题标题】：Pins are jumping when scrolling on full height parallax page on iOS Safari with ScrollMagic使用 ScrollMagic 在 iOS Safari 上滚动全高视差页面时，引脚会跳动
【发布时间】：2016-05-13 07:56:47
【问题描述】：

我有一个全高部分的视差页面。桌面上的 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>

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

【问题讨论】：

标签： javascript jquery ios safari scrollmagic

【解决方案1】：

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

【讨论】：