jQuery Mobile 1.1 fixed headers and footers

In general, jQuery Mobile's fixed headers and footers are a nice solution. Mobile browsers are getting better at supporting it properly with no visual artifacts, but they're still not all the way there.

Here's the jQuery Mobile 1.1 RC1 test page to try out your mobile devices:

http://jquerymobile.com/demos/1.1.0-rc1/docs/toolbars/bars-fixed.html

(Note that jQuery Mobile has disabled page zooming on pages with fixed headers and footers to suppress some crazy behaviour!)

Their solution is based on this suite of test pages by Brad Frost: http://bradfrostweb.com/demo/fixed/index.html

You can comment below if you find anything weird.

To my surprise, three Android 2.3 devices do very well, (Hallelujah!) and our iOS5 device supports it very nicely - well, that is until you allow the user to pinch-to-zoom the browser page content! (Controlled by an HTML header page directive.) Then some very weird things start to happen. On Android 2.3 it seems to forget that it knows how to do fixed positioning, and on iOS5 it's even more entertaining: the fixed header will move at a different rate to the page content, and when you hit the right extent of the page, the header actually moves in the opposite direction to the page text! Who knew the iPhone supported parallax scrolling effects!!!

And here's the really bad news, if you're still on iOS 4 (or earlier). Since this platform doesn't support fixed positioning well, the jQuery team decided to 'degrade gracefully'. Unfortunately they put the emphasis more on degrade than gracefully, and now iOS 4 doesn't support any type of fixed header and footer at all without putting the onus on the developer. The previous solution was to have the header and footer fade out during the page scrolling (since it would move with the page content during the scroll) and then fade back in when the scrolling was done (since the browser would correct the position of the fixed position elements once the user lifted their finger).

I pointed out to the jQuery Mobile team that their new degradation strategy was biased toward web pages and not web apps, since now iOS 4 users could not have toolbars at the bottom of the screen, only at the bottom of their content. What a bad user experience that is! It's now virtually impossible to position a navbar at the bottom of the screen, which to me defeats the object entirely.

It appears that they see my point and we will at least have a way of falling back to the 'old way' soon, even if it is through a plugin or extension library.

I actually think there's an even better option for iOS 4, and that's using a javascript scroller div like the iScroll component. We already use a scroller in our mobile app and it works just fine on iPhone, (with the exception of textarea controls which grab the swipe event overriding the scroller). It was Android that was the problem. (See previous posts.)