Flickering UI while change page in jQuery mobile

Question

I'm using jQuery mobile 1.0. when I move to one page to another page in iPhone, the second page comes and flicker then showing first page and completely move to second page. How fix this one? thanks in advance..

Update: you can check http://gugl.org/page1.html for an example.

Answer 1

I fix this issue with the following CSS code:

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    overflow: visible;
}

I mention more of it in my blog.

Answer 2

Please let me know if the following helps with your flicker:

/* Remove flicker on Android / WebKit  */
.ui-page {
  -webkit-backface-visibility: hidden !important;
}

This snippet comes with a warning though. While it might solve the flickering problem, it often introduces other issues.

For example I was stuck for a week trying to figure out why my google maps were no longer working the way I needed them to, and it turned out that this snippet was the cause of the problem. I moved to selectively targeting this rule to all pages that do not have maps in them.