First off if you're experiencing JQueryMobile performance issues add the following CSS settings.
/*JQuery Mobile Optimisation */
.ui-shadow,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,
.ui-body-b,.ui-btn-up-b,.ui-btn-hover-b,.ui-btn-down-b,
.ui-bar-c,.ui-body-c,.ui-btn-up-c,.ui-btn-hover-c,
.ui-btn-down-c,.ui-bar-c,.ui-body-d,.ui-btn-up-d,
.ui-btn-hover-d,.ui-btn-down-d,.ui-bar-d,
.ui-body-e,.ui-btn-up-e,.ui-btn-hover-e,
.ui-btn-down-e,.ui-bar-e,.ui-overlay-shadow,
.ui-shadow,.ui-btn-active,.ui-body-a,.ui-bar-a
{
text-shadow: none;
box-shadow: none;
-webkit-box-shadow: none;
}
/*Enable CSS hardware acceleration*/
.hwaccel { -webkit-transform: translateZ(0); }
The visual impact is quite small but the performance gained is about 100% If you're having strange visual problems when linking from one page to another such as flashes, blinking where the screens flickers first then displays the page, the problem is with JQueryMobile transitions, there are 3ways to fix this. Set the transition in the to none this doesnt always want to work and its to much work to maintain. 2nd you can download a plugin that fixes the transitions but doesn't work with the new JQueryMobile 1.3.1. Or do this:
This will disable transitions for all links in a page. If you want to link to a page without using AJAX is sometimes it causes weird issues with redirects and linking add this to a tag data-rel="external" data-ajax="false" If you're mobile app support rotation(Which IT SHOULD!) and you have JQueryMobile Headers and Footers that don't always resize on rotation add the following Javascript:
If you're developing for Apple iOS as well then you might encounter a small zooming glitch where the device will automatically zoom in when selecting form items, to fix this disable zooming.
And there you go that will fix most of the annoying issues you might encounter with JQueryMobile. I'll update this when I encounter more bugs and fixes.
