Menu
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;
}
360
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");
});
});
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.
12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
