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.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With