jQuery mobile + phonegap +android 4.0.4 header flicker

4
votes

I'm developing an app with jQuery mobile 1.2 and phonegap. Testing it on android 2.3 works fine. On android 4.0.4 there is an annoying flickering of the header and footer. They disappear during the transition between one page and another.

I tried to preload all the pages.

I set

$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';

I tried with

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

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    overflow: visible;
}

Still have this issue. As I said: on android 2.3 the same code is working and I see the header as if it was fixed even if I change page.

Hope someone will be able to help.

Thanks in advance.

1
androidcordovajquery-mobile

1 Answers

1
votes

I was having this same issue, then I made the headers "persistent" across all pages by adding the data-id attribute in each header.

So I have pages 1 through 4, on each page there is header, if I add data-id="mainHeader" (mainHeader can be whatever you want) to each, that makes the header persistent across all pages where the attribute is included. It should not go away between page transitions. *Note, the data-id tag can be used in footers as well.

Here is a header from one of my apps:

<div data-role="header" data-position="fixed" data-theme="a" data-id="mainHeader">

More Info: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html