Fixing jQuery Mobile's 'none' transition flicker in PhoneGap
I thought I'd post a solution I found to the notorious white flickering problem that occurs in jQuery Mobile with page transitions, even when the transition is set to 'none'.
It was driving me nuts that I couldn't fix this problem after trying every solution I found on the web. Removing gradients, rounded corners, box shadows, scrolling style fixes; nothing worked. After some experimentation and a bit of dumb luck, I noticed the problem went away if I removed the meta viewport tag in head.
Specifically, I changed it from:
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=no" />
I've yet to see any negative effects caused by this, but I haven't thoroughly tested it on a wide variety of devices. So far it appears to make page transitions much smoother in jQuery mobile. I'm sure this would cause problems if viewed in a normal mobile browser, but in PhoneGap's closed environment, it might be an acceptable solution.
This has only been tested with jQuery Mobile 1.8.3 in PhoneGap 2.3.0.
EDIT: What this does (I think):
The initial-scale attribute basically tells the browser what zoom level to start at when loading the page. My guess is that when this is defined, the embedded WebView browser in PhoneGap recalculates page scaling on every page refresh, which is expensive. Since PhoneGap is meant to emulate a native application, disabling user scaling will probably be acceptable for most basic apps that won't require any pinch-to-zoom functionality. Removing the meta tag can cause some problems on tablets as they won't properly calculate the WebView's width and height. However, disabling scaling seems to do the trick while not having a huge effect on tablets.
Again, I haven't thoroughly tested this, but it seems to solve the problem. This coupled with the other flicker solutions sprinkled across the web might just be enough to make transitions feasible.
