Fixing jQuery Mobile’s ‘none’ transition flicker in PhoneGap

 I originally posted this on my old Tumblr blog and thought I’d repost it here since some people actually found it useful.  Original post follows:

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">

to:

<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.

2 thoughts on “Fixing jQuery Mobile’s ‘none’ transition flicker in PhoneGap

    1. This definitely looks like a more robust solution for handling different screen sizes and orientation. At the time I was really just concerned with fixing the flickering since it was a portrait-only view.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s