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...

Answer 2

Try to download and use the latest version jquery(1.8.2) and jquery mobile(1.2.0) and its css(1.2.0).

Regards

Answer 3

Did you do the following workaround:

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

As stated here

Important: Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be throughly tested on the target platform before deployment. This workaround is known to cause performance issues, and browser crashes on some platforms especially Android.

Answer 4

Here, I come with the solution........

Please follow the sequence

// First of all jQuery
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

// then load custom jQuery Mobile
<script type="text/javascript" src="mobile/js/mobile-jqm.js"></script>

// then load jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

// finally load your own scripts (.js) files 
<script type="text/javascript" src="mobile/js/script.js"></script>

To disable transitions, create mobile-jqm.js filt & inside of the mobile-jqm.js file, place this code:

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
   defaultPageTransition: 'none'
  });
});