CODEWITHSUNDEEP
htmljquery-mobilecordova
xus
xus

Reputation: 2607

Transitions blink on jQueryMobile pages navigation

I'm developing an HTML5 app using PhoneGap + JqueryMobile. My problem is when I redirect the user to another page (for example, when he hits a link, or clicks an image button), I do it using:

$.mobile.changePage("next-page.html");

The problem is that when the second page loads, after the transition has been executed correctly, the background image seems to "blink" -I see the background, then it blinks to white, and then I see the background image again.

If then I go to the main menu and do the same, the "blink" problem does not happen again, just the first time the website is opened.

Any idea why this happens? Thanks!

Upvotes: 5

Views: 9079

Answers (6)

Riki_tiki_tavi
Riki_tiki_tavi

Reputation: 916

Today i had a similar issue when using JQuery Mobile 1.4.3 with annoying blinking when I press F5 button, or when I open a page without ajax. Everything disappeared and then appeared.

If you have the same problem, just remove this CSS from jquery.mobile.css:

/* Fouc */
.ui-mobile-rendering > * {
     visibility: hidden;
}

Upvotes: -1

Juan Carlos Alpizar Chinchilla
Juan Carlos Alpizar Chinchilla

Reputation: 880

In my case, this was caused for the data-position="fixed" in the header and footer, once I removed these the blinking dissapeared.

You can perform the fixed header with a simple css class for it and it will work without messing up the transitions

Upvotes: 0

user2779727
user2779727

Reputation: 1

This work for me..

https://github.com/jquery/jquery-mobile/issues/5431

remove this at jqmobile js file:

meta.attr( "content", disabledZoom );

... and:

meta.attr( "content", enabledZoom );

Upvotes: 0

Eduardo de Souza
Eduardo de Souza

Reputation: 21

I had this issue and resolved using this:

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
}

Upvotes: 2

ChrLipp
ChrLipp

Reputation: 15668

I had the same issue. And I did fetch additional images on that page. Several answers show an CSS solution which didn't work for me. Instead I used this approach: Flickering when navigating between pages

According to the jQuery Mobile theme this is an performance issue on the Android 2.x platform, so I turned off the animated transitions (details in the link above).

Upvotes: 1

Naning
Naning

Reputation: 734

I think your problem is caused because you arrive at the new page before all the images used on that page has been loaded.

For example. Let's say your page "next-page.html" uses an icon on a button(icon.png). You arrive att "next-page.html", and half a second later icon.png has finnished loading. The screen will then blink when the icon is inserted on the button.

Upvotes: 1

Related Questions