position:fixed sliding bug in Chrome Mobile
Question
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 the footer looks like the following:
#footer{
width:100%;
height:auto;
filter:...;
margin:0;
padding:0;
position:fixed;
bottom:0;
z-index:3000;
}
The initially shown part of the footer would be #pull2 with the following CSS properties:
#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;
}
2 answers
solution1
15 2014-07-29 11:49:12
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
$(document).ready(function () {
var winHeight = $(window).height();
$(window).scroll(function () {
$("#footer").css("top", $(window).scrollTop() + (winHeight-30) + "px");
});
});
solution2
10 2017-01-07 01:11:11
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.