Transitions blink on jQueryMobile pages navigation

Question

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!

I have and asked about same problem w no answer I was on android — CI_Guy, Oct 06 '11 at 16:11
On Android this blinking (if I understand the description right) is a known problem of jQM. They tried to fix it, but so far it didn't work (you can read more on the reasons in this post on jQM blog: http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/) — NPC, Oct 06 '11 at 18:11
Try the last release of JQM, wich is at this moment v1.0 RC1 — Mariano Montañez Ureta, Oct 07 '11 at 05:38
Solution here: http://stackoverflow.com/questions/5953753/flickering-when-navigating-between-pages — xus, Oct 17 '11 at 15:38

score 2 · Answer 1 · answered Mar 31 '12 at 14:51

2

I had this issue and resolved using this:

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

answered Mar 31 '12 at 14:51

Eduardo de Souza

21
2

score 1 · Answer 2 · answered Oct 13 '11 at 16:42

1

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.

answered Oct 13 '11 at 16:42

Naning

734
2
8
18

I'm having this problem, however for me the screen doesn't flicker, but rather turn white permanently when images load. The header and footer are still visible, but the rest of the page is white. As soon as i touch the white page, it will redraw the contents within. Any idea on how to fix this? – EasyPush Oct 01 '12 at 07:14
I should mention that this only happens when i delete the cache of the application, probably due to the images loading before the content they hide if they are cached – EasyPush Oct 01 '12 at 07:21

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

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).

edited May 23 '17 at 11:51

Community

1
1

answered Jan 20 '12 at 11:35

ChrLipp

15,526
10
75
107

score 0 · Answer 4 · edited Oct 26 '13 at 10:23

0

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 );

edited Oct 26 '13 at 10:23

Eugene Loy

12,224
8
53
79

answered Oct 26 '13 at 10:01

user2779727

1
1

score 0 · Answer 5 · answered Feb 24 '14 at 21:56

0

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

answered Feb 24 '14 at 21:56

Juan Carlos Alpizar Chinchilla

880
9
23

Riki_tiki_tavi · Answer 6 · 2015-03-22T16:00:35.553

-1

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;
}

edited Mar 22 '15 at 16:00

answered Sep 12 '14 at 15:45

Riki_tiki_tavi

827
8
15

Transitions blink on jQueryMobile pages navigation

6 Answers6

Linked