Html 位置：修复了Chrome Mobile中的滑动错误

如果你在手机上查看Chrome Mobile并向任何方向滚动，页脚将不会保持不变。有什么原因或解决办法吗

页脚的CSS代码如下所示：

#footer{
    width:100%;
    height:auto;

    filter:...;

    margin:0;
    padding:0;

    position:fixed;
    bottom:0;

    z-index:3000;
}

页脚最初显示的部分是#pull2，具有以下CSS属性：

#pull2 {

    width: 100%;

    display: block;
    position:static;
    float:none;

    padding-left:10px;

    z-index:0;

    background: ...;
    background-position:...;
    cursor:pointer;

}

#pull2 p{

    line-height: 40px;
    margin:0;

}

尝试添加

-webkit-backface-visibility: hidden;

带

位置：固定

Ref:





或者，您可以使用jQuery实现这一点


$(document).ready(function () {

    var winHeight = $(window).height();

    $(window).scroll(function () {
        $("#footer").css("top", $(window).scrollTop() + (winHeight-30) + "px");
    });

});

除了
-webkit backface visibility:hidden
技巧之外，元素大于页面似乎也会导致
位置问题：已修复
（根据）。可能还值得将
添加到您的
标签中。
其位置：固定而非绝对…检查此项谢谢您的回答，我刚刚尝试了此项！但是没有帮助，即使*{-webkit backface visibility:hidden；}也没有帮助。这个错误可能在我怀疑的其他地方。禁用页面的用户缩放并不是最好的主意。如果用户不能读取某些内容，他们会尝试缩放，如果他们不能，他们只会生气：）我同意，最好尽可能避免禁用用户的缩放功能。但我想分享我对这个问题的解决方案，因为它让我觉得太模糊了。也许我应该更新我的答案，说明在绝对最坏的情况下（最坏的情况，或者非常特殊的情况下（例如，如果你正在模拟“桌面”或其他非web应用程序），即使是在Android上的Chrome Mobile和Chrome desktop Mobile emulation中有一个比当前页面更宽的元素也会导致这种情况。iOS和所有Firefox上的Chrome都不受影响。解决方案是修复元素，使其不超过页面宽度，然后一切正常。我无法理解这两者的联系方式，但它是有效的。如果你在UINo luck中为我提供了其他字体大小调整方法，那么在Android 9的backface visibility中禁用缩放也可以。导致故障的。