CODEWITHSUNDEEP
javascriptcssjquery-uijquery-mobilemobile
selladurai
selladurai

Reputation: 6779

Flickering UI while change page in jQuery mobile

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.

Upvotes: 7

Views: 5109

Answers (6)

zSprawl
zSprawl

Reputation: 999

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.

Upvotes: 3

Cymbals
Cymbals

Reputation: 1174

See if this works better for you:

http://jquerymobile.com/test/

This is a known problem with version 1 & this was reported as a closed bug for iOS. This has been worked on, and will be officially released in 1.1.

In the meantime, the test site has the latest code if you cannot wait.

(usual disclaimer about about using test code in production here.)

update: Announcing jQuery Mobile 1.1.0 RC1
http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/

Demo it at: http://jquerymobile.com/demos/1.1.0-rc.1/

Upvotes: 0

imaginethepoet
imaginethepoet

Reputation: 864

This behavior can be caused by quite a few items.

  • Long data lists that go past the initial screen scroll. They need
    time to render when the screen scrolls
  • Dynamic injection of data - same thing needs time to render
  • Android seems to be flicker everywhere. The one thing we did was to just shut off transitions for pages with android and default them to fade. In fact this is the approach that JQM will be taking in the next release.
  • Use of non ajax based page links which than go back to your core app

These are just a few things that can cause the behaviors you may be seeing. At the very least this is a starting point to trouble shooting some of your issues.

Upvotes: 0

shanabus
shanabus

Reputation: 13115

You probably just need to enable touchOverflowEnabled

Example:

<script>
$(document).bind("mobileinit", function() {
  $.support.touchOverflow = true;
  $.mobile.touchOverflowEnabled = true;
});
</script>

Also note that this won't be necessary in jqm 1.1.0. More on this here.

Upvotes: 0

user1228295
user1228295

Reputation: 453

I'd hold off for jQueryMobile version 1.1 which is due later this month.

Upvotes: 0

darryn.ten
darryn.ten

Reputation: 6973

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.

Upvotes: 2

Related Questions