Question

jQuery Mobile 1.1.0 Final was just released and promises:

“True fixed toolbars: Lightweight, CSS-based & broadly compatible”

What is the specific fix they have to solve all the position:fixed headaches in mobile browsers?

I have a Desktop App (twitter bootstrap based) that has postion:fixed toolbars that do not work well on mobile browsers?
I would like to incorporate the specifix fix without all the other functionality and CSS jQuery Mobile ships with.

Answer 1

Easy (more or less):

1) Browser sniffing to generate a blacklist.
2) Position:fixed for supporting browsers
3) Position:static for the rest

Inside JQM look for this section:

$.widget( “mobile.fixedtoolbar”, $.mobile.widget, {…}

As a lot of mobile browsers do not supported pos:fix as of now, you will end up with static toolbars sitting at the bottom of your content in a lot of browsers!!!

There also is a polyfill to get back the previous behavior (hide-reposition-show).

I’m just using a part of this polyfill to reposition elements before showing them like so:

 el.jqmData("fixed") == "top" ? el.css( "top", $( window ).scrollTop() + "px" ) :
    el.css( "bottom", wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );

This works nicely, if your toolbars/elements do not have to be visible, because it calculates from a set position (scroll-stop-recalcualte) vs the original fixed toolbars (pre JQM 1.1) recalcualting during scroll (scroll-calculate-scroll-calculate), which is just too much of a strain on device hardware and caused the toolbars to stick or jump.