在移动设备上滚动 (iOS) 会导致延迟，浏览器地址栏行为异常（隐藏并重新出现）

Question

我一直在做一个运行良好的网站，除了一些我将在未来解决的优化问题；你可以在那里看到它：http://robin-v.net/

我今天面临的问题是，在移动浏览器上 – 至少在 iOS 上，我最近无法尝试 Android，但我听说它表现良好类似地 – 滚动会导致浏览器延迟很多并且地址栏行为怪异。

每当您滚动时，在滚动过程中不会发生任何奇怪的事情，但是一旦您将手指从屏幕上移开，浏览器就会冻结片刻，然后地址栏会切换其状态——如果它可见，它就会折叠，反之亦然。我知道地址栏会在您向下滚动时折叠，但无论滚动方向如何，它都会在您滚动时从隐藏切换为可见。（根据浏览器的不同，地址栏可能永远不会隐藏，并且在 100% 的时间内保持可见。）

我不知道是什么导致了这种行为...当前在线的网站版本几乎没有 JS（与滚动无关的一点点）。我很确定这是由于 CSS 声明，但我不知道是哪个。

老实说，我对网络开发比较陌生，而且是自学的，所以我确定我一定是哪里做错了什么，但我不知道是什么。我在我制作的另一个网站上遇到了同样的问题，所以这可能是我从某个地方养成的习惯，我应该改掉。

根据我收集到的信息，我认为这可能与 html 或 body 元素上的声明有关，或者与溢出或定位有关... 但我只有这些。 :/

我在下面粘贴基本结构元素的代码，但我什至不确定问题出在它们身上。

HTML

<body class="home blog">
    <div id="main">
        <div id="scenes">
            ...
        </div>
        <div id="slidewrapper">
            <div id="rightsec" class="mainsec">
                ...
            </div>
               <div id="leftsec" class="mainsec">
                ...
            </div>
    </div>
</div>
</body>

CSS (Sass)

html {
    box-sizing: border-box;
    font-size: 125%;
    text-size-adjust: 100%;
    line-height: 1.4;
}

body {
    background: #000;
}

#main {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#scenes {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    width: 100%;
    margin: auto;
    pointer-events: none;
}

#slidewrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
}

.mainsec {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#leftsec {
    z-index: 1;
    left: calc(60px - 100%);
}

#rightsec {
    z-index: 2;
    right: calc(60px - 100%);
}

干杯！

Answer 1

好吧，看来这都是由包含内容的元素具有固定大小，填满整个屏幕（在本例中，#main 为 100vw * 100vh）和 overflow: hidden 引起的。滚动时，#main 中的内容会移动，但文档本身不会移动，因为它不大于视口。这就是为什么地址栏也从不移动的原因。

我设法在不同的网站上解决了这个问题，但不幸的是，由于我主页的结构（我在问题中链接了它），我不知道如何在那里改变它。如果有人有想法，请随时分享！

在移动设备上滚动 (iOS) 会导致延迟，浏览器地址栏行为异常（隐藏并重新出现）

Scrolling on mobile (iOS) causes lag, browser address bar behaves weirdly (hides and reappears)

html

css

mobile-safari

mobile-website