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:

$(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