Skip to content
This repository

Double transitions with jqm 1.1-rc1 and phonegap 1.4.1 + fixed toolbars #3768

Closed
haroldneal-cap opened this Issue · 25 comments
haroldneal-cap

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

haroldneal-cap

A zip file containing the www directory for my sample PhoneGap application can be found here: http://thinkprogress.org/wp-content/themes/tp3/interactives/jqm11test/www.zip

Todd Parker

Thanks for the very detailed report @haroldneal-cap.
@scottjehl - any theories why the fixed toolbars would trigger the double transitions?

Andreas Olsson

I can just say that I had trouble with this also. I made a test app that has some transitions and a fixed header. This works great on my computer, and also works great running in the browser on my phone.
But by creating a PhoneGap app and testing it on various Android phones, both running 4.0.3, it didn't work. The problem in showed in the Youtube link occured.

haroldneal-cap

A couple more notes: the problem also occurs with PhoneGap 1.5. Also, if you try to build my sample app, you need to go to the PhoneGap.plist file and add . to the ExternalHosts setting. I think everything else is default. If I can provide any more info, let me know

Benjamin Thatcher

I've had this problem also when using PhoneGap with jQM.

haroldneal-cap

Does anyone have any workarounds so that the problem is not so pronounced?

Gary McCann
gm90 commented

I had a similar issue in phonegap. Using the following CSS:

  • { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

at the top of my custom stylesheet, double transitions become much smoother. Let me know if this also helps you.

Note * This may throw some styling off around padding and margins in your original styles but a few developers including Paul Irish are suggesting this practice should be more widely adopted anyway. Hopefully that will help others.

haroldneal-cap

@gm90 I tried this out and it definitely reduces occurrences of the issue. It still happens about half the time. I haven't determined if there is a pattern to when it occurs and when it does not.

Scott Jehl
Gary McCann
gm90 commented

Apologies @scottjehl , wasn't trying to undermine the great efforts you guys are going to.

By no means a long term solution more of a quick fix and hopefully more than anything will help the team identify the current issue.

Kind regards,
Gary

Scott Jehl
Gary McCann
gm90 commented

Thanks @scottjehl

Just in case it is something that may be looked into/worth experimenting with at a later date or even 5 minutes on your test rig, initial feedback:

I can't speak for any other platforms apart from iOS or Android but both seem to accomodate the property quite well, in fact for me the only thing that was a little off center was the page spinning loader.

Stephen Handley

i'm seeing similar issues with both "none" and "fade" transitions on ios5, phone gap 1.4.1 with a fixed header and fixed footer. it doesn't look to be anything particular to phone gap or even ios5, as when I test in safari without phone gap included, i see the same issue.

not sure if it helps, but the flicker is most present when the fromPage has been vertically scrolled. it looks as if there's an initial transition to the unscrolled fromPage and then a second transition to the toPage. when the fromPage is not scrolled, the transition to the toPage is way better.

for reference, this is on a single-file, multipage app that's binding to pagebeforechange to load data from json, populating the pages and then calling $.mobile.changePage with an override on the pagebeforechange handling. (similar approach to http://jquerymobile.com/test/docs/pages/page-dynamic.html)

also, for what its worth, the box sizing approach doesn't seem to significantly address the flicker i'm seeing.

John Bender

@toddparker @scottjehl @haroldneal-cap

I've got the phonegap project packed up for anyone who wants to look at this in the latest xcode

http://dl.dropbox.com/u/4837669/JQMTest.zip

It's more pronounced on the emulator when you scroll the content a bit and then hit one of the buttons. In the xcode project just make sure to click one of the header buttons and then start your testing (it links to external resources).

John Bender

Quick update:

No amount of futzing the in outInTransitionHandler showed any sort of change, but removing the content from the page seemed to make a difference. Then adding in the content on one page and scrolling down about half way would trigger the issue again.

Starting to feel like a rendering issue :(

Todd Parker

I just tried the test page (http://jsbin.com/eyufam/54) on my iPhone 4S and it seemed to work ok until I saved the page to my homescreen. Once the page was out of Safari and in a webview, the flip transitions would cause the browser chrome (url bar, etc.) to flash during transitions which is bizarre. My hunch is that the combination of the less capable web view + 3D transforms + fixed positioning is causing iOS to get glitchy on rendering.

Do people know if the performance of a webview inside an app and a page saved to the homescreen in iOS are equivalent?
http://stackoverflow.com/questions/8853260/ios-webapp-performance-safari-vs-home-screen-start

Stephen Handley

damn....really hoped this was gonna make it into 1.1. this is a blocker for an app i'm working on so its looking like I'm gonna have to abandon JQM for the project. any update on progress?

Todd Parker

In our initial testing, this just seems to be a rendering issue with iOS. If I take a page with a fixed toolbar it's ok in Safari, but if I save it to the homescreen and open the same page, I see all blinking artifacts in the browser chrome so this seems like a case where the embedded browser is less capable of keeping up when fixed toolbars in are in play. We're going this a deeper look, but it's tricky to get consistent performance from these browsers.

Scott Jehl
Todd Parker

Hi all - I think this is a duplicate of #4024, or at least they are related.

Scott's fixes from this morning seem to have made a big difference. For a quick and dirty simulation of an embedded web view, similar to PhoneGap (same rendering deal, minus phone gap.js), go to the config test page below, save it to your home screen in iOS, then open it and browse the docs.

If you test 1.1, in fullscreen mode, you'll see a flash even when just browsing normal pages with the fade transition. If you try the fixed header page, there is a nasty double blink:
http://jquerymobile.com/demos/1.1.0/docs/config/iOSFullscreen.html

On master, I just tried master after the fixes from this morning and it's waaay better. Both of thee flashes are gone. Awesome work by @scottjehl
http://jquerymobile.com/test/docs/config/iOSFullscreen.html

Please test in PhoneGap to confirm. Let us know how this is looking...

torbenberger

i don't know what has actually been changed, but I just took the jquery.mobile.css and the jquery.mobile.js referenced in your second link, and transitions just work really nice, also inside phonegap and nativly on my iphone :)

transitions are really smooth and clean now! thanks for your support :)

Todd Parker
Jasper de Groot
Owner

@scottjehl - Did that fix land already and can we close or not?

Todd Parker

I think this issue is now resolved so I'm closing. If there is still an issue for folks, please chime in with details and a test page.

Todd Parker toddparker closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.