JQuery-Mobile Page transitions - flickering (separate pages)

问题

I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.

I found that

.ui-page { -webkit-backface-visibility: hidden; }

or setting the data-transition to none

or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file

helped.

But apparently that is only working if the webapp is just one "multi-page".

I am using 4 separate pages.

In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering. But as soon as I add the App to to the Homescreen it flickers again.

Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J

Is there no solution for this?

回答1:

Nothing answered so far worked for me. I ended up binding a function to all links or elements which cause a page change. In the function, i trigger the page change but explicitely tell it 'none' for the transition.

Here is an example:

Javscript (jQuery)

$('.item-navbar-people').on('tap', function (e) {
  $.mobile.changePage("#page-people", { transition: "none" });
});

Markup

<div data-role="navbar">
  <ul>
    <li><a class="item-navbar-people ui-btn-active">People</a></li>
  </ul>
</div>

Hope this helps!

回答2:

Work-around Solution

So, these are the things I tried:

data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
-webkit-transform:translate3d(0,0,0);
data-position="fixed" headers/footers
deactivating user scale in meta tags

It did not work for "Homescreen-App"/"PhoneGap-App" I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.

So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.

回答3:

This is a known issue.

Disabling/Enabling zoom BEFORE each page transition will resolve the issue.

回答4:

I spent weeks trying all suggested solutions in the Internet, what works for jquery.mobile-1.3.2 , Android 4.1.2, phonegap 2.9.0 is to delete these lines in jquery.mobile-1.3.2.js file

meta.attr( “content”, disabledZoom );  // just put // before the line



meta.attr( “content”, enabledZoom ); // just put // before the line

This will eliminate double flicks, also

set data-transition between pages to none

data-transition="none"

(The second fix is temporally until you can find a solution to get ride of remaining white page during transition)

Using this solution, no need to remove data-position="fixed" from header or footer which is one of helping solutions, but affecting interface design.

source: comments on http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html

回答5:

I had the same problem and something that sped things up and eliminated the flickering effect was implementing fastclick.js found here: https://github.com/ftlabs/fastclick.

After linking to the .js file,

Add

<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

to the head of your document.

Voila. That helped me, hope it helps you too!

来源：https://stackoverflow.com/questions/17328832/jquery-mobile-page-transitions-flickering-separate-pages

标签

css

jquery-mobile

web-applications

cordova