Search code examples
jquerymobile-safaripositioningcss-positionsticky-footer

Mobile Safari Fixed Position Footer Problems

How do you get a mobile safari fixed position footer to stay where it belongs and not bounce?

Solution

  • Alright - I solved this one before going crazy. I don't know if it will work in all situations, but it works like a charm on my iPhone 4s.

    Assuming you have the proper css, which is something like:

    body { 
    height:100%;
}

#footer {
    position:fixed;
    bottom:0;
}

    and you have set the viewport for mobile devices -

    This solution worked perfectly for me. I am using jQuery, but not jQueryMobile. This small bit of javascript/jq code solved everything, and there is no bouncing or other visual gaffes:

    document.ontouchstart=function(){
    $('#footer').animate({bottom:0},1);
}

    And that's it! Hope this is helpful to someone.