JQuery mobile + phonegap + android 4.0.4 header flicker

Question

I am developing an application with jQuery mobile 1.2 and a phone. Testing on Android 2.3 works great. Android 4.0.4 has annoying flickering of the header and footer. They disappear during the transition between one page and another.

I tried preloading all pages.

I have installed

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

I tried using

 .ui-page { -webkit-backface-visibility: hidden; } .ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page { overflow: visible; } 

There is still this problem. As I said: on Android 2.3 the same code works, and I see the title as if it has been fixed, even if I change the page.

Hope someone can help.

Thanks in advance.

Answer 1

I had the same problem, then I made the headings “permanent” on all pages, adding the data-id attribute to each heading.

So, I have pages 1 through 4, each page has a heading if I add data-id = "mainHeader" (mainHeader can be whatever you want) to everyone, which makes the heading permanent on all pages where the attribute is enabled . It should not go between page transitions. * Note. The data identifier tag can also be used in footers.

Here is the title from one of my applications:

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

Additional information: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html