Recently I have been working on a mobile app that uses jQuery Mobile 1.1.0 as a UI framework. In general I’ve had really good experience with jQuery Mobile except it gave me some headaches when it came to page transitions. Some really weird flickers and jumps started to popup when I deployed it on the iOS 5.x platform as a PhoneGap app. This was something I didn’t experience when the same code was running in a device browser. After a few hours of digging into the issue I came up with a workaround that I didn’t find anywhere else and that solved all my problems I actually have seen all kinds of fixes to similar issues but I think this one is least invasive, because it doesn’t involve any framework code tweaks.
Ok, so what worked for me was instead of using s body tag as a page container I used an absolutely positioned div inside of a body (this approach was okay for me as I used the
-webkit-overflow-scrolling: touch; CSS property for scrolling pages content). I know this may not be the ideal solution for everyone but I think it is really good one when working with PhoneGap or other UIWebView based containers.
UPDATE 13.07.2012: I’m still using this with just released jQuery Mobile 1.1.1 version, which unfortunately didn’t solve all the transition quirks I’ve experienced.
UPDATE 04.10.2012: You may also want to read this post about native scrolling with this approach.
Below is a template of my index.html that does the trick: