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

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

Answer 2

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; }

Answer 3

Adding this line

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

helped me.

Answer 4

It seems that the following META tag solves the issue:

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

Answer 5

I fixed it with:

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

Answer 6

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"