Thursday 1 March 2012

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:
(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:
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.)


  1. This bug (or lack of functionality) for IOS4 is really annoying. I'm building an app and while it works great in IOS5, the header and footer do as this article mentions.

    What is the best solution to having a sticky footer and header for IOS?

    1. jQuery Mobile has an internal scroller component which is 'experimental'. (Very similar to iScroll, which is also an option.) They dropped it because it was extremely unpredictable on Android, but it works fine on iOS. If I get around to it, I'll post how to integrate this into your JQuery Mobile projects.

  2. How about using Phonegap's Native UI plugin for IOS

  3. This is an iOS only solution, introducing native code and PhoneGap to the mix. Fine if you're delivering Hybrid on one platform, but leaves you out in the cold if your goal is to deliver a pure web cross-platform solution.