jQuery Mobile + Phonegap : Page Header and Contents go Blank after Transition Completes

1
votes

I have a phonegap (2.2.0) + jquery mobile (1.2.0) app that is having a strange issue.

I have a page in my app that contains a link to load another page. On the loaded page I have a back button that, when clicked, takes the user back to the previous page. When I view this interaction within a web browser it works perfectly and no errors are thrown.

However, when I view it in IOS, the page content and header disappear once the back button transition animation is complete. I see the page show for a flash then it all goes white. Again, just the page header and content disappear. I placed an alert in the pageshow event on the page that I am returning to and the page does not go blank until after the alert is closed.

To make things stranger, if I click/tap on the blank area of the page, the content magically shows up again! I just dont get it. I tried repainting the page by calling a .page() and/or a .trigger('updatelayout') on the page container, but it seems to do nothing.

Only this page has this issue. All other transitions work fine, even after the blank page thing occurs.

I've not been able to figure this out for many hours now, so any help with this would be greatly appreciated.

1
jqueryioscordova
what kind jquery function r u using after the page transition like $.document.pageinit() or someother page intialisation function. Have u written any code after the page transition method .coz i once had problem like this fixed through the initialization function. piece of code what u did can be helpful to understand what you are tryin to do. – Sathya Raj
The only code that I am aware of that runs is the pageshow binding: $( '#page-feed').bind('pagebeforeshow', function(e){ PZapp.data.getFeedData(); PZapp.site.settings.getNewsData = true; PZapp.site.settings.getFeedData = true; });. Again. There are zero errors being thrown in the web version of the app. – EricL

1 Answers

1
votes

It turns out it was one line of CSS that was messing it up. I added some CSS a while back to lessen the flickering between transitions. When I removed it, all worked properly. The offending css was this:

.ui-page { -webkit-backface-visibility: hidden; }