0

I hope you are ok.

So, the thing is, I'm writing a PhoneGap app using jQuery Mobile.

The jQuery Mobile version is: jquery.mobile-1.4.0.

I'm using several ways to do transitions between the views that are located inside the same file, not on separate html files, like this:

<div data-role="page" id="preload">

<div data-role="page" id="noConnection">

<div data-role="page" id="intro">

... and so.

The current viewport meta tag is this one:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

So far, I have not been able to remove that blink between transitions.

About the methods to change between views, I have tried several ways but in all of them I get the same blink:

$.mobile.changePage("#termsAndConditions", {transition: "slide", reverse: false});

$.mobile.pageContainer.pagecontainer("change", "#termsAndConditions", {transition: "flow", reload: true});

Do you have any sugestion about how could I solve this?

It happens in iPhone with iOS 7, iPad with iOS 7, not tested yet in Android.

Thanks in advance for the help.

benka
  • 4,732
  • 35
  • 47
  • 58
  • Have a look at this http://stackoverflow.com/questions/14723514/blinking-flickering-with-jqm-and-phonegap-on-android – Rob Schmuecker Feb 18 '14 at 07:57
  • Hey Rob, thanks for the idea but is not working. Do you have any other idea? –  Feb 18 '14 at 21:47
  • Have you tried the CSS regarding webkit-backface-visibility? – Rob Schmuecker Feb 19 '14 at 07:08
  • I tryied this: ui-page { -webkit-backface-visibility: hidden; } ... with a negative result... –  Feb 20 '14 at 17:24
  • Hopefully it was a typo in your comment but it should be `.ui-page` with a dot (.) infront of ui-page – Rob Schmuecker Feb 21 '14 at 07:01
  • Hey Rob, the css rule is bad, I had it without the dot, so, I will try like this and will let you know. Thanks again for your help!! –  Feb 22 '14 at 15:25

1 Answers1

0

use overlay, not hidden when transitioning

.ui-mobile-viewport-transitioning .ui-page {
    overflow-y: overlay;
}
Qantas 94 Heavy
  • 15,750
  • 31
  • 68
  • 83
user3681944
  • 1