15

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;

}
3
  • Its position: fixed not absolute... Jul 29, 2014 at 11:37
  • check this stackoverflow.com/questions/19254146/… Jul 29, 2014 at 11:43
  • 1
    Thanks for the answer, I tried this just now! Didn't help though, even *{-webkit-backface-visibility:hidden;} hasnt helped. The mistake might be somewhere else i suspect.
    – Alex
    Jul 29, 2014 at 11:48

2 Answers 2

16

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");
    });

});
2
  • No luck for me in Android 9 on backface-visibility. Causing glitches.
    – mheavers
    Aug 20, 2020 at 21:44
  • I had to add <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/> to have it working.
    – AFract
    Jun 19 at 16:56
13

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.

7
  • 4
    Disabling user scaling of a page isn't the greatest idea. If user can't read something, they will try to scale, and if they can't, they will only get angry :)
    – jave.web
    Mar 18, 2017 at 17:47
  • I agree, it's best to avoid disabling the user's scaling ability whenever possible. But I wanted to share my solution to the problem, because it struck me as being so obscure. Perhaps I ought to update my answer with a note about only using that meta tag in the absolute worst-case scenario? Mar 21, 2017 at 16:46
  • Worst, or a very special case (e.g. if you are simulating "desktop" or other non-web app)
    – jave.web
    Mar 21, 2017 at 19:52
  • 3
    Interestingly, even having an element wider than the current page causes this in Chrome Mobile on Android and Chrome Desktop mobile emulation. Chrome on iOS and all Firefox are unaffected. The solution is to fix your element so it does not go beyond the width of a page, then everything works fine. How the two are connected is beyond me but it works. Jul 12, 2017 at 6:51
  • 1
    No need to put user-scalable to no. But adding <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"/> fixed the issue for me, as long as default scale is used
    – AFract
    Jun 19 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.