固定位置 div 导致页面在不太常见的移动浏览器中被截断

Question

我知道有很多类似的问题，但这与我以前遇到的任何问题都不一样，所以我想我会在这里描述错误，并提供解决方案 - 并询问是否有其他人有更好的解决方案或可以阐明这个奇怪问题的原因。

错误：

在具有 position:fixed 样式的 div 的页面中，在一些不太常见的移动浏览器中，例如Star Safari、DU Browser、Tint Browser - 页面按预期加载，div 按预期固定，但如果页面高度大于约 1500px，则页面底部将被截断 - 全白窗帘。您仍然可以滚动到底部，但它只是白色，内容为零。 此错误不会发生在更常见的浏览器中，例如 chrome、firefox、opera、safari 等。

这是我的 phone（HTC M8 - Tint 浏览器）的屏幕截图 - 在三星 S5 上也重现了这个错误。

您可能需要一个固定的 div 的原因有很多，在我的例子中，它是为了一个可以跟随视口的菜单按钮，这样访问者就不必滚动回顶部来得到菜单。

我已经在下面发布了一个半解决方案，但我不会在一周内将其标记为正确，所以希望其他人可以提供更好的解决方案。

蒂姆

Answer 1

我之所以称其为 "semi-solution" 有两个原因：

1) 这将 而不是 保持 div 完美固定，但它会在滚动事件后优雅地移动 div。

2) 虽然这不会导致页面永久截断，但它确实会在不透明度过渡期间闪烁 'curtain'。很奇怪吧？

编辑：我应该提到这个解决方案在普通浏览器（chrom、safari 等...）中看起来很棒，闪烁的窗帘将仅适用于否则会被固定位置截断的浏览器 div, 所以虽然它在一些不太常见的浏览器中并不漂亮，但它仍然比替代方案更好，并且是对更多常见浏览器的风格的一个小妥协。

这是菜单按钮示例的代码，请根据自己的需要进行调整。

HTML 例子

<body onscroll="menuButton()">
    <div style="height:2000px; border: thick dotted green; width:90vw; background-color:#131313"></div>
    <div id="menuButton">
        <div class="image"></div>
    </div>
</body>

CSS

#menuButton {
    position: absolute;
    top:25px;
    left: 25px;
    opacity: 1;
    z-index: 1001;
    transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
}

.image {
    width:50px;
    height:50px;
    background-color:red;
}

JavaScript

function menuButton() {
    setTimeout(function () {
        var button = document.getElementById("menuButton").style;
        var pos = document.documentElement.scrollTop || document.body.scrollTop;
        var newPos = pos + 25 + 'px'; // Offset is the start value of the div top position.
        button.opacity = 0;
        setTimeout(function () {
            button.top = newPos;
                    setTimeout(function () {
                        button.opacity = 1;
                    }, 500);
        }, 500);
    }, 800);
}

这里是 jsfiddle

固定位置 div 导致页面在不太常见的移动浏览器中被截断

Fixed position div causes page to be truncated in less common mobile browsers

css

cross-browser

css-position

mobile-browser