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)

希望它可以帮助某人！