position:fixed sliding bug in Chrome Mobile

前端未结

关注

 2  769

If you view my website in Chrome Mobile on a mobile phone and scroll in any direction, the footer wouldn\'t stay put. Any idea for the cause or a fix?

The CSS code of t

相关标签:

2条回答

孤街浪徒

2021-02-13 12:43
Try adding;
```
-webkit-backface-visibility: hidden;
```
with position: fixed.

Ref:

Easy CSS fix for fixed positioning
Position fixed not working in mobile browser

Alternatively you can achieve this with jQuery

Working Fiddle
```
$(document).ready(function () {

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

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

});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
别那么骄傲

2021-02-13 12:51

In addition to the -webkit-backface-visibility: hidden trick, having an element larger than the page seems to also cause issues with position: fixed (as per this question). It may also be worth adding <meta name="viewport" content="user-scalable=no"> to your <head> tag.

0 讨论(0)
发布评论:

提交评论
- 加载中...