jquery/jquery-mobile — Issue #3768: Double transitions with jqm 1.1-rc1 and phonegap 1.4.1
Author: haroldneal-cap
Created: 2012-03-08 17:19:24+00:00
State: open

I am running jQM 1.1.0-rc.1 with PhoneGap 1.4.1 on an iPad 1 running iOS 5. I have created a very simple application that uses $.mobile.changePage to load a few web pages from a web server, using the flip transition.

If you view the same set of pages in mobile Safari, it works fine. Transitions are smooth and look good. However, doing the same thing inside PhoneGap, every transition happens twice. First the originating page flips out of view, then the new page appears in whole without a transition, then the transition effect occurs on the new page.

I have created a video to demonstrate the effect: http://youtu.be/EDZ-FM_rWi0 Hopefully it is not too shaky.

I've created a code snippet at http://jsbin.com/eyufam/54 that shows the basic structure of the pages, however, you won't see the problem unless you are running it inside a PhoneGap application.

The PhoneGap application is barely more than the "Getting Started" app found at http://phonegap.com/start#ios-x4 except that I have a different index file and the required jQuery libraries. I will try to attach to this ticket.

I had filed a similar issue earlier and then closed it because I thought it was my code. But this time, none of my custom logic is part of the app. I have determined that the double transitions only occur when I have a header with data-position="fixed" . Take out the fixed header and it works ok.

I'm not sure whether to post the issue with jQM or with PhoneGap, but the effect was not noticeable until I went from jQM 1.0.1 to jQM 1.1.0-rc.1