Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Position:fixed Sliding Bug In Chrome Mobile

Post a Comment
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 lo

Solution 1:

Try adding; 

-webkit-backface-visibility: hidden;

with position: fixed.

Ref:

Easy CSS fix for fixed positioningPosition 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");
    });

});

Solution 2:

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.

Post a Comment for "Position:fixed Sliding Bug In Chrome Mobile"