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;

}
Kamran Ahmed
  • 7,661
  • 4
  • 30
  • 55
Alex
  • 751
  • 1
  • 6
  • 34

2 Answers2

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

});
Community
  • 1
  • 1
Aamir Shahzad
  • 6,683
  • 8
  • 47
  • 70
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.

Community
  • 1
  • 1
Niko Chaffin
  • 394
  • 2
  • 10
  • 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 '17 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? – Niko Chaffin Mar 21 '17 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 '17 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. – CaspianRoach Jul 12 '17 at 06:51
  • Its fine to disable scaling if you provide other font-sizing methods in the UI – Frondor Sep 12 '17 at 15:47
  • Thanks @CaspianRoach, this was my issue. I had multiple nested Twitter Boostrap .row/.col-xs-12 divs and the many -15px neg margins and 15px paddings didn't exactly get-along and one of my nested col-xs-12 was bigger than my .row. So fixed that, and seems to work now. – armyofda12mnkeys Jan 03 '20 at 20:00
  • 1
    No need to put user-scalable to no. But adding fixed the issue for me, as long as default scale is used – AFract Jun 19 '23 at 16:55