Why are JQuery mobile fixed footers so crappy?

JQuery mobile footers are not properly fixed to the bottom of the screen. In the normal behavior they follow the bottom with a lag. And in most case it remains quite buggy (it doesn't show at the bottom of the screen).

My question is why is this?

Take into consideration that:

• Solutions seems to work quite well for modern browser and CSS (position: absolute, bottom: 0px). I guess that some navigators don't support that? Which ones? And why is that?
• Sencha touch seems to give a much better alternative on the footer case. But what's the secret? Is it compatible with all browser开发者_开发技巧s?
• Jquery is at its .rc1 at the time of this question. It probably won't be fixed in the JQuery mobile 1.0 release. (jQuery Mobile and a fixed footer)

---

From the release notes:

• http://jquerymobile.com/blog/

iOS5: Dramatically improved page transitions and true fixed toolbars

The team has spent a ton of time working on trying to improve transitions and fixed toolbars because we know these are important features to developers. After spending hundreds of hours working on refinements, we now believe that the path to substantial, cross-platform improvements in these areas can only happen when mobile platforms start supporting overflow properties natively. JavaScript-based momentum scroller scripts are too heavy, unresponsive and narrowly compatible to be a way forward.

That’s why we’re very excited by iOS5′s upcoming support for a touch-targeted version of overflow:auto , and proper support for position:fixed which allows for internal scrolling regions with the native momentum scrolling with CSS. In Beta 3, we’ve added an enhancement layer to leverages these new CSS capabilities to will enable us to bring both truly “fixed” toolbars and super smooth transitions in iOS5, all by using web standards and very little additional code.

• https://github.com/jquery/jquery-mobile/commit/2369e2fa322e721c687408f790230efe4f621fef
• https://github.com/jquery/jquery-mobile/commit/2a6c7fc1b982c4308a0450a308f5a66a10e949cf#diff-8
• https://github.com/jquery/jquery-mobile/commit/23e79fb1dbba9f4eb15e29b4842579bdd0d1b100

---

There are some JavaScript scrollable-content plugins that you can use to create a fixed footer that doesn't suck:

• iScroll -> http://cubiq.org/iscroll-4
• ScrollView -> http://jquerymobile.com/test/experiments/scrollview/
• Flexcroll -> http://www.hesido.com/web.php?page=customscrollbar

I'm sure there are more but these are three I've had some success with. I've settled on using iScroll personally.

To get a nice fixed footer you can set the header to position: absolute and top: 0, set the footer to position: absolute and bottom: 0, and then set the content area to position: absolute, top: <bottom of header> and bottom: <top of footer>.

One issue I have found with this is that setting the document to 100% height will not allow the address bar to be scrolled out of view. To fix this, when the load event fires on the window object I set the height of the document to 100px more than the screen height (window.innerHeight). I then scroll to the top of the page ($.mobile.silentScroll(0)), and set a timeout to reset the height of the document to 100%.

$(window).bind('load', function () {
    $.mobile.activePage.css({
        height       : (window.innerHeight + 100) + 'px',
        'min-height' : (window.innerHeight + 100) + 'px'
    }).find('[data-role="footer"]').css({
        bottom : '100px'
    });
    $.mobile.silentScroll(0);
    setTimeout(function () {
        $.mobile.activePage.css({
            height       : '100%',
            'min-height' : '100%'
        }).find('[data-role="footer"]').css({
            bottom : '0px'
        });
        if ($.mobile.activePage[0].id in myScroll) {
            myScroll[$.mobile.activePage[0].id].refresh();
        }
    }, 750);
});

The above example:

1. Changes the height of the current pseudo-page to 100px more than the height of the screen.
2. Changes the position of the footer so it stays in view for the whole process.
3. Scrolls to the top of the page (i.e. scrolls the address bar out of view).
4. Sets a timeout to re-size the current pseudo-page to 100% height and reset the position of the footer. The timeout is necessary so the scroll can occur before the height is reset to 100%.
5. I used iScroll in this code and saved each iScroll instance in an array so that I could refresh the iScroll content area whenever I made changes to the DOM that affected the size of the scrollable area.

I also trigger the load event on the window object whenever there is an orientation change:

$(window).bind('orientationchange', function () {
    $(window).trigger('load');
});

---

I'm working with Jquery.Mobile 1.2alpha, doesn't seem to be an issue anymore. The data-position-'fixed' works great

<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
    <ul>
        <li><a href="#" onclick="$.mobile.changePage('/url/1');">Url 1</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/2');">Url 2</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/3');">Url 3</a></li>
        <li><a href="#" onclick="$.mobile.changePage('/url/4');">Url 4</a></li>
    </ul>
</div>
</footer>

Additional suggestion to disable the "webview bounce" if you're developing for a wrapper app. http://community.phonegap.com/nitobi/topics/uiwebview_bounce

---

Fixed footer solution that worked for me:

<div data-role="footer" data-position="fixed" style="position: absolute">