CODEWITHSUNDEEP
ipadjquery-mobile
Anders
Anders

Reputation: 12726

jQuery Mobile blinking at page transitions on iPad

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 the browser navigation removed by , then the page transitions "blink" quickly after each page transition.

I have Googled on this and found that blinking was considered a bug a long time ago, and by now should be fixed. And it seems to be in Safari, but not as standalone from home screen. Does anyone know what is causing this and how to fix it?

Does it have anything to do with the fact that the navigation bar is not there? It works fine as standalone on iPhone though, it's only on the iPad that it occurs...

I would accept as an answer even if someone can show me that this is a known bug (not one of the old bugs that have already been fixed, where it flickered even in Safari mode) or if someone has inside knowledge about that (no one is answering my question at the jQuery forum either...). But of course I would love it if someone actually had a workaround for the problem!

Upvotes: 11

Views: 22982

Answers (12)

Pedro Lobito
Pedro Lobito

Reputation: 98921

I fixed it with:

<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />

Upvotes: 2

vijay
vijay

Reputation: 21

Adding this line

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

helped me.

Upvotes: 2

tdesany2
tdesany2

Reputation: 11

It seems that the following META tag solves the issue:

<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />

Upvotes: 1

tosha Shah
tosha Shah

Reputation: 1217

This only worked partially for me

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

for data transition "flip" it worked but not for "slide"

Upvotes: 0

CashLee李秉骏
CashLee李秉骏

Reputation: 1048

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

Upvotes: 0

Anders
Anders

Reputation: 12726

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.

Upvotes: 1

Charlie
Charlie

Reputation: 71

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

Upvotes: 7

barry
barry

Reputation: 835

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.

Upvotes: 0

user875234
user875234

Reputation:

This only partially works for me:

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

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

Which prevent's flickering and whitespace at the bottom of the page but notice that transitions are turned off.

Also, id's are not being used more than once which I can verify with:

// an id used more than once??
    var ids = new Array();
    $.each($("[id]"), function () {ids.push($(this).attr("id"));});

    var matches, val1;
    for (var i = 0; i < ids.length; i++) {
        matches = 0;
        val1 = new RegExp(ids[i], "i");
        for (var i2 = 0; i2 < ids.length; i2++) {
            if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
                matches++;
        }
        if (matches > 1)
            alert("This id was used more than once: " + ids[i]);
    }

Have also tried:

$.extend($.mobile, {
        metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
    });

And loading the page into the DOM and only once that is complete doing the transition as so:

var promise = $.mobile.loadPage(url, {
        pageContainer : $("body")
    });
    promise.done(function () {
        var newPage = $("body [data-role='page']:last").attr("id");
        $.mobile.changePage($("#" + newPage));
    });

I'm still getting the flickering on page transitions.

the answer.... jquery mobile page flicker

Upvotes: 1

Pen Moor
Pen Moor

Reputation: 131

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

Upvotes: 13

sgliser
sgliser

Reputation: 2071

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.

Upvotes: 3

Stephan Eggermont
Stephan Eggermont

Reputation: 15907

It is a known bug. See the article in the seaside mailing list.

Rolf van der Vleuten noticed:

  • flickering can occur when using the same #id more than once in a page, which is not unlikely when you are using the one page template method. so be sure to not use #id's more than once.

  • I don't know why this happens, but I found out that when my first page had an element that is outlined by default, flickering would occur, this was fixed by adding:

    input { outline: none; }

Upvotes: 0

Related Questions