Safari iOS 底部有神秘的白色条纹

Question

我有一个网站，其底部出现了不需要的白色条纹，并且仅适用于移动 Safari iOS 访问者。

我使用以下代码将页脚区域粘贴到底部：

<div class="page_wrapper">
    <!-- Content here -->
</div>
<div id="footer">
    <div class="footer_sticker">    
        <div class="footer_upper">
            <!-- Content here -->
        </div>
        <div class="footer_lower">
            <!-- Content here -->
        </div>
    </div>
</div>



#footer, .page_wrapper:after {
    height: 275px;
}
.page_wrapper:after {
    content: "";
    display: block;
}
.page_wrapper {
    margin-bottom: -275px;
    min-height: 100%;
}
#footer {
    position: relative;
}
#footer .footer_sticker {
    bottom: 0;
    height: 275px;
    position: absolute;
    width: 100%;
}

Answer 1

过去时代的问题但是，我今天遇到了这个问题，将视图从纵向更改为横向时。所以这是我的解决方案：

我的研究：

注意：当从纵向更改为横向时 - address-bar 被隐藏，而当您从横向更改回纵向时，address-bar 出现缓慢（需要几秒钟）。 这就是问题所在！。

你看，底部那条神奇的白条几乎和address-bar + mobile top bar一样高

基本上 CSS height: 100%/100vh 是在所有这些魔法发生之前绘制的，我们会在底部看到令人讨厌的空白白条。

我是如何解决的

通过延迟计算文档的高度（比如 200 毫秒），这样我就可以在所有效果后获得文档的最终高度，并使用新值设置文档高度。

这就是我的意思：

var timerHandler;
timerHandler = setTimeout(() => {
   document.documentElement.style.height = `${window.innerHeight}px`;
}, 350)

希望它对某人有所帮助！