jQuery Forum

This only partially works for me:

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