Question

I’m trying to implement the fixed footer on my site.

My problem is, when I scroll the page, the footer is overlapping with the content. When scrolling is finished, it falls back to the bottom. Is this the standard behavior?

I checked this link. It works on desktop browser. ie. the footer remains fixed on scrolling. But on mobile(android) it scrolls with the page. Can I make it really fixed?

EDIT: HTML added

<div data-role="footer" data-iconpos="left"  data-id="jefooter" data-theme="b" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul>
            <li>
                <a href="/welcome" data-icon="jehome" data-iconpos="notext" data-direction="reverse" data-ajax="false">Home</a>
            </li>
            <li>
                <a href="/mobile/users/settings" id="user_auth" data-icon="jesettings" data-iconpos="notext" data-transition="fade" data-ajax="false">My Settings</a>
            </li>
            <li>
                <a href="/mobile/help" data-icon="jehelp" data-iconpos="notext" data-transition="fade" data-ajax="false">Help</a>
            </li>
        </ul>
    </div>
</div>

You can see the page at m.qa.hungryzone.com

EDIT 2:

Android version is 2.3.5

Answer 1

Unfortunately this appears to be a bug that is present with jQuery Mobile on devices running Android 2.3.5 – 2.3.6 .

The guys at jQuery Mobile are pointing the finger at Google:

…this does seem to be a bit of blip — a regression in Android that Google seems to be fixing in later versions but as all Android issues go, it’s not clear or consistent.

The open bug report and more details can be found here:
https://github.com/jquery/jquery-mobile/issues/4281