使用ScrollMagic在iOS Safari上的全高视差页面上滚动时，图钉会跳跃 [英] Pins are jumping when scrolling on full height parallax page on iOS Safari with ScrollMagic

问题描述

我有一个视差页面，其中有完整的高度部分.桌面上的Safari，Chrome和IE可以完美运行该页面.但是，当在Safari中的iOS设备上查看时，下一个启动引脚将向上跳固定大小.我不太确定如何调试此问题，从而了解其在智能手机上的行为.

I have a parallax page with full height sections. Safari, Chrome and IE on Desktop the page works perfectly. But when viewed on a iOS device in Safari the next start pin is jumping a fixed size upwards. I am not quite sure how to debug this problem hence its behaviour on the smartphone.

其中包括两个屏幕截图，以显示销钉如何从其原始位置移位.

Two screenshots have been included to show how the pin is displaced from its original position.

我已经删去了可能不足的一小部分代码，但是如果复制困难，我很乐意填写.

I have cut out a minimal part of the code which may be inadequate, but i am more than happy to fill this in if reproduction is difficult.

提琴: 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);

推荐答案

问题是通过为主体和剖面元素设置固定高度来解决的.由于iOS上Safari的特性，高度会随着滚动以及url-bar和工具栏的折叠而变化，这会导致响应式的高度变量出现问题.

The problem was solved by setting fixed height to the body and section elements. Due to the nature of Safari on iOS the height changes as your scroll and the url-bar and toolbar is collapsed, which causes problems with the responsive height variables.

这篇关于使用ScrollMagic在iOS Safari上的全高视差页面上滚动时，图钉会跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！