Jquery mobile iphone page flicker

Question

I am working on a mobile page application, where one of the pages is very long, (This page is so long that if I have to view it from top to end I have to scroll 6 times on Iphone. )

after this page loads, it jumps and settles. or flickers after loading, and is very annoying to the users.

data on this page is being rendered at run time. I have empty div elements which I fill in at run time with field names and values using jquery pageshow event.

I found that if I shorten the length by removing some of the data being rendered this flicker vanishes, however I cannot do so

Business doesn't want to change the design and I have tried all sorts of tricks to prevent this flicker and now I have run out of ideas, I have tried putting a delay in displaying the page until the page loads completely, doesn't work though

Can you please help, is there any solution to prevent this page flicker.

Thanks Ira

Answer 1

What you referring to is called "blinking" as has been well documented and asked a few times on here:

jQuery Mobile blinking at page transitions on iPad

Transitions blink on jQueryMobile pages navigation

https://github.com/jquery/jquery-mobile/issues/4024

I had the same problem myself on my Android phone (v4.0.4) with an app built on PhoneGap: transitions to/from my main page (which contained a long data-role="listview" ) would cause the screen to blink before executing. What did the trick for my was adding user-scalable=no to the viewport meta tag:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />

Though others have had success by overriding jQuery mobiles css and/or disabling page transitions altogether:

CSS

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

JS

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

Answer 2

You could implement a little loading icon until all your data is loaded. This will give the user a seemless experience but still keep in line with the business requirements.

Something along the lines of having a wrapper div with display none. On load the loading div would show with background image of loading.png. When the content has been loaded, set the wrapper div to show and remove the loading div.

It would be better to load the data differently though but I understand that isn't always possible.

Answer 3

For jQuery Mobile, make your footer persistent and prevent that portion from animating.

<div data-role="footer" data-id="foot" data-position="fixed">
  <h4>Page 1 Footer</h4>
</div><!-- /footer -->

jsFiddle DEMO

---

EDIT: Latest Developments

The above jsFiddle jQuery Mobile Demo has been revised to use jQuery 1.7.2 with jQuery Mobile 1.2.0.

I just discovered that using jsFiddle with jQuery 1.8.2 and jQuery Mobile 1.2.0 does not work as intended when overflow is set to hidden during use of a scrollBars function within that jsFiddle.

That function is to hide the browsers scrollbars during jQuery animations, preventing elements to briefly jump around during the animation period of page changes.

The browsers scrollbars are in fact hidden, but elements in the body section continue to "jump" as if the scrollbars are still present.

This does not occur when jsFiddle jQuery is set to 1.7.2.