3

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?

RedErdnuss
  • 123
  • 3
  • 15
  • Can you please show the code you have tried...as mentioned in the question those options usually help to get rid of jquery mobile flickering page transitions. – Nagama Inamdar Jun 27 '13 at 05:22
  • 1
    http://jsfiddle.net/q5hrx/ this is my code, I recoded it, because I can't show my exact code for legal reasons. It's just the content. But the structure is the same. On MobileSafari/homescreen-app/phonegap-app this site will flicker/blink after navigating – RedErdnuss Jun 29 '13 at 19:56
  • possible duplicate of [jQuery Mobile flickering screen during transitions](http://stackoverflow.com/questions/11029427/jquery-mobile-flickering-screen-during-transitions) – gion_13 Oct 30 '13 at 19:54

6 Answers6

7

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!

Anthony Graglia
  • 5,355
  • 5
  • 46
  • 75
  • Thanks for your tip. Nothing else but your suggestion solved the problem on my end. – Sunil Jan 11 '14 at 04:37
  • 1
    This worked great for me. I had set transition: none globally anyway, but for some reason, only when I concatenated all my scripts with grunt, the active page was flickering on one specific changePage call. Brilliant. – Adam Marshall Mar 27 '14 at 09:38
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.

VAShhh
  • 3,494
  • 2
  • 24
  • 37
RedErdnuss
  • 123
  • 3
  • 15
0

This is a known issue.

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

Xarcell
  • 2,011
  • 6
  • 33
  • 65
0

I figure out it, changing the scale of viewport meta tag.

Let's me clarify... In my tests I saw that when I apply some zoom in page on mobile devices, the transition works perfectly. So, just change the initial-scale in your viewport meta tag to something higher than 1.0, something like 1.01 for example. That's it!

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.01">
Alex Rosa
  • 1
  • 1
-1

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

user2814778
  • 296
  • 6
  • 14
-1

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!

zb0t
  • 1
  • 2