jQuery Mobile blinking at page transitions on iPad

Question

I have a web app built with jQuery Mobile that works fine when using it in Safari on an iPad. However, when you add it to the home screen to use it as a standalone app (with

Answer 1

i had exactly the same problem

http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+views+and+transitions mentions something that worked for me.

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

I still get the flicker in the toolbar, so I converted my tool bar to :

<ul data-theme="b" data-role="listview" style="margin-top: 0;">
     <li data-role="list-divider">Your text goes here</li>...

Answer 2

I was nervous about commenting out focus, but a google search found the following CSS that seems to work:

.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Original link: https://github.com/jquery/jquery-mobile/issues/2856

I was only having a problem with the slide transition (even reverse slide worked fine. JQ 1.7.1 JQM 1.0.1 PhoneGap 1.5.0

Answer 3

From the currently open issue, "Slide page transition causes screen repaint on iOS 5 chromeless", the recommendation is to comment out pageTitle.focus() from the reFocus function.

This however did not solve my problem. I found it necessary to remove both pageTitle.focus() and page.focus(), basically the entire function.

This issue (and specifically the change to the reFocus function) is also mentioned in issue 2474. It is a fix for iOS4 that did not solve my iOS5 iPad problem.

Answer 4

Unfortunately, none of the suggestions actually solved the problem, at least not for me. However, finally it has been fixed in the latest stable version of jQuery mobile (1.1.0), so the problem is finally gone! I just had to go in and change the global transition back to slide, because they set it to fade:

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

Hope this helps someone else who perhaps hadn't noticed the update.

Answer 5

Revision: It should be noted that the discussion below was mitigated with the release of iOS 5.0. It can be a partial influencing factor for anyone who hasn't upgraded but if you're running 5.0, Nitro is ever present. http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

--original answer-- Apple introduced the Nitro javascript engine into the Safari browser. However, they only installed it on the browser, not in the UIWebView (which is what you get when you run form the home screen or embedded in an application like PhoneGap.

There has been some speculation if this performance boost was omitted on purpose. http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.

So, if it seems like it's actually performing slowly... that's cause it really is. It's not using the Nitro engine.

Answer 6

This seems to be a very very strange bug.I tried to fixed it.But failed.Finally I try to add some code to my project to avoid this issue.

If you deep into jquery mobile's page transition you would know his principle.

It loads another page's (the page you want to go) body into an element such as : .

I just add an wrapper outside of this element and make a setTimeout to delay showing this page.

I made a phonegap app in iPhone 4(ios5) and can't fix this issue.Just pray that jquery mobile team would fix this bug quickly.After spending a few days on this problem I just wanna fuxk jqm...