iphone jquery mobile flickering issue

Question

I am facing flickering issue on iPhone with an app developed using jQuery mobile. I have tried several solutions available on the internet including CSS changes, setting transitions to "none" and even commenting code in jquerymobile.js. But no luck... JS and CSS files I am using are below:

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.min.css" />

Any help on this will be greatly appreciated. Thanks.

Answer 1

While I was searching for flickering header and footer during transitions I've found this SO thread as well as: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

It's that simple: If the page you're navigating to has a header or footer with the same data-id as the page you're navigating from, the toolbars will appear fixed outside of the transition.

<div id="sell" data-role="page" > 
    <div data-role="header" data-id="header" data-position="fixed">
        <h1>Seconds.me</h1>
        <a data-role="button" href="#buy" data-icon="arrow-l" data-theme="app-ios" style="color: white; text-decoration: none;">Back</a>
    </div>

      <h3>1</h3>
      <a href="#buy">2</a>

  </div>  

  <div id="buy" data-role="page" > 
    <div data-role="header" data-id="header" data-position="fixed">
        <h1>Seconds.me</h1>
        <a data-role="button" href="#sell" data-icon="arrow-l" data-theme="app-ios" style="color: white; text-decoration: none;">Back</a>
    </div>

      <h3>2</h3>
      <a href="#sell">1</a>

  </div>

Was flickering, now flickers it not. See data-id="header" which the same for both pages.

(hope that helps)

UPDATE: http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html --> this page also tackles flickering...