White flash/flicker when transiting between 2 web pages in Phonegap #4024

elfgoh · 2012-04-12T18:58:39Z

I have 3 files in my phonegap 1.4.0 application that uses jquery mobile 1.1.0 rc2. Here is a quick description on the code before the code snippets are shown.

They are index.html, foo.html and todo_list.html

index.html has a button that links to foo.html
foo.html has a button that links to bar.html
bar.html has a button that links to foo.html html via data-rel="back"
foo.html and bar.html are identical except that the header bar in bar.html has a header that is made up of divs

foo has the header as follows

<div data-role="header">
    <h1>Bar</h1>
</div><!-- /header -->

<div data-role="header" class="header_custom" data-position="fixed">
                <div class="header_left_button header_section_width" style="">
                    <a href="index.html" class="first" data-direction="reverse" data-icon="arrow-l" data-iconpos="notext" data-role="button">Back</a>
                    <a href="index.html" class="second" data-icon="home" data-iconpos="notext" data-role="button" data-transition="fade">Home</a>       
                </div>
                <div class="header_title header_section_width">
                    <a href="home.html" class="title_link" data-transition="fade">Bar</a>
                </div>

                <div class="header_right_button header_section_width">
                    <a href="add.html" class="last" data-icon="plus" data-iconpos="notext" data-role="button" data-transition="fade">Add</a>

                </div>  
            </div><!-- /header -->

If there is difficulty reproducing this. I can try to reproduce files. The classes on the divs should not matter as I removed the custom css reference when testing.

The text was updated successfully, but these errors were encountered:

elfgoh · 2012-04-12T19:01:23Z

To remedy this, a quick fix is to remove data-position-"fixed" .

All mentioned above applies only to an iOS phonegap mobile app. It doesn't seem to be reproduced on desktop or mobile safari.

paragon-creations · 2012-04-13T20:04:47Z

This happens in iOS in full-screen mode too (after adding the web-app to the home-screen).
It happens whenever there is any transition and data-position:fixed is involved.

Any plan to fix this soon?
Is there any work around?
Tried:
.ui-page {-webkit-backface-visibility:hidden}

But it didn't work...

paragon-creations · 2012-04-13T20:17:14Z

I think I just found a temp workaround:
Instead of data-position:fixed to the header / footer - I applied the following CSS styles to the header, content and footer:

.header {position:fixed;z-index:10;top:0;width:100%}
.content {padding:45px 15px}
.footer {position:fixed;z-index:10;bottom:0;width:100%}

elfgoh · 2012-04-14T04:44:38Z

I did some further investigation and produced 2 files for testing using in phonegap 1.4.0 and JQM 1.1.0. To replicate. run the files as a phonegap app in iOS 5.1. and click on the signup and then back button to replicate

index.html


<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.1.0.css" />
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery.mobile-1.1.0.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">

            <div data-role="header" data-position="fixed">
                    <h1>Loginnn</h1>
            </div><!-- /header -->

            <div data-role="content">
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>
                <p>sasadasdasd</p>

                <a href="signup.html" data-role="button" data-transition="slidefade">Sign up</a>
            </div>

        </div>
    </body>
</html>

signup.html

 <html>
    <body>
        <div data-role="page" id="signup">

            <div data-role="header">
                <a href="" data-rel="back" data-role="button">moo</a>
                <h1>Loginnn</h1>
            </div><!-- /header -->

            <div data-role="content">

            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

elfgoh · 2012-04-14T04:50:05Z

In my earlier comment, changing the transition from slidefade to slide also has weird flashing issues

<a href="signup.html" data-role="button" data-transition="slidefade">Sign up</a>

to

<a href="signup.html" data-role="button" data-transition="slide">Sign up</a>

elfgoh · 2012-04-14T04:59:13Z

This might be related or a duplicate #3735

elfgoh · 2012-04-14T05:18:18Z

Other related threads to track
#3768
#2856
#3674

elfgoh · 2012-04-15T12:29:35Z

I have also attempted to use http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.css to replace the original css file and also discover that the flickering and flashing persists.

elfgoh · 2012-04-15T13:53:34Z

Some stackeroverflow posts have made suggestions below but they did not work for me particularly when there is a long body of text in the content div

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

.ui-page {
-webkit-backface-visibility: hidden;
}

toddparker · 2012-04-16T16:46:36Z

Hi al - we're looking into this. This forum post seems to have an interesting fix that we're going to review
http://forum.jquery.com/topic/jqm-rc1-1-flicker-after-transition-full-screen-mode

3drockz · 2012-04-18T10:25:20Z

Adding my 2 cents... it is really FRUSTRATING to see every page flicker even in 1.1.0 final! I read almost every blog/forum regarding this issue and nothing really could solve it.

It really is extremely bad when there's more content on the page and if you've scrolled down and then trigger the transition...

Btw, mine is an HTML5 app using JQM 1.1.0 + Cordova on iOS 5.1 on a 4S

paragon-creations · 2012-04-18T10:28:33Z

You can solve it temporarily be adding your own classes to the footer / content / header instead of the data-position:fixed attribute.

e.g.
Instead of data-position:fixed to the header / footer - apply the following CSS styles to the header, content and footer:

.header {position:fixed;z-index:10;top:0;width:100%}
.content {padding:45px 15px}
.footer {position:fixed;z-index:10;bottom:0;width:100%}

tegansnyder · 2012-04-19T04:30:30Z

same issue

dcarrith · 2012-04-19T13:08:03Z

Just as a test, I did what @orenagiv suggested and turned off my fixed header and footer and put the CSS in place. While testing in my Phonegap app as well as just in the browser, It became clear to me that the fixed toolbars are definitely contributing to the blinky transitions. So, it's not just causing a white/flash flicker in Phonegap as is covered by this issue. I love the progress that was made to get the fixed toolbars to the state they are in now. Unfortunately though, it seems that there are some side effects caused by the magic that was used. Another test I ran, and actually ended up leaving in place, was to set all of my transitionFallbacks to none. That way, if running on a platform that doesn't have good support for the 3d transforms, it just turns off the transitions. The result is far better than the default fade.

elfgoh · 2012-04-19T14:24:51Z

@dcarrith Do you have some jsfiddles for comparison? Think that will be helpful for the devs

dcarrith · 2012-04-19T14:43:40Z

@elfgoh, I don't, but it looks like the docs for fixed positioning toolbars has the same sort of flashy/blinkyness on Android 2.3.7 (probably other platforms too, I'm just not at home right now to test). Turning off fixed toolbars on that page or a similar test page would likely reduce the flashy blinkyness as I observed last night.

I've never used jsfiddle, but I can give it a shot tonight and see what I can put together.

…, focus, scrolling, setting height) called ui-page-pre-in. This class sets the opacity of the TO page to 0 during this momentary process, which at least in my testing, prevents fixed toolbars and pages from flickering during transitions when fixed toolbars are used in a web app mode in iOS (not Safari, but native webview). Fade transition is particularly improved. Addresses, but perhaps doesn't completely fix Issue #4024

scottjehl · 2012-04-20T18:58:45Z

For me, that CSS tweak suggested by @orenagiv didn't make any difference. With the regular fixed toolbars, the main issue I saw was the toolbar on the TO page flickering in and out during the transition. However, applying the suggested CSS to static toolbars instead made for a much more flickery overall transition for me - where pages were blinking twice rather than an odd toolbar.

After a lot of tinkering tonight, the following commit seems to do some good, at least in Fade transitions on my iOS5 device:
ff1a7e0

Alternatively, people could choose to just hide the toolbars during transitions, which would help too, if also changing the effect a bit. The css for that would be something like this:
.ui-mobile-viewport-transitioning .ui-header-fixed,
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; }

Anyway, how's the commit test out for you? Any better?

paragon-creations · 2012-04-20T19:36:10Z

Did you remember to remove the data-position=fixed when applying the CSS tweak?

dcarrith · 2012-04-20T19:45:20Z

I'll definitely try out the .ui-page-pre-in opacity tweak when I get home tonight. Thanks Scott!

scottjehl · 2012-04-20T19:50:21Z

I did yes. I just changed your example selectors to use "ui-" prefixes for static toolbars.

On Apr 21, 2012, at 1:06 AM, orenagiv wrote:

Did you remember to remove the data-position=fixed when applying the CSS tweak?

Reply to this email directly or view it on GitHub:
#4024 (comment)

paragon-creations · 2012-04-20T20:23:28Z

Maybe you have a conflict with other "ui-"
classes.
I suggest you try applying them as separate new classes like my example.

In any case, it's just a very temporary solution.

I will also try the opacity suggestion soon.

tegansnyder · 2012-04-20T21:26:58Z

scott thanks! I will try this when i get home and let u know

toddparker · 2012-04-20T21:33:14Z

Hi all -

Scott's fixes from this morning seem to have made a big difference. For a quick and dirty simulation of an embedded web view, similar to PhoneGap (same rendering deal, minus phone gap.js), go to the config test page below, save it to your home screen in iOS, then open it and browse the docs.

If you test 1.1, in fullscreen mode, you'll see a flash even when just browsing normal pages with the fade transition. If you try the fixed header page, there is a nasty double blink:
http://jquerymobile.com/demos/1.1.0/docs/config/iOSFullscreen.html

On master, I just tried master after the fixes from this morning and it's waaay better. Both of thee flashes are gone. Awesome work by @scottjehl
http://jquerymobile.com/test/docs/config/iOSFullscreen.html

Please test in PhoneGap to confirm. Let us know how this is looking...

tegansnyder · 2012-04-20T22:20:49Z

I can confirm that Scott's additions work. I just tested using the latest build unstructured css http://code.jquery.com/mobile/latest/jquery.mobile.structure.min.css and js http://code.jquery.com/mobile/latest/jquery.mobile.min.js

dcarrith · 2012-04-20T23:45:37Z

It's amazing how a small change like that makes such a difference. I just tested in my phonegap app on the following devices:
Original iPad running iOS 5.0
HTC Thunderbolt running Android 2.3.7
Blackberry Playbook v2.0

I also tested my app as a homescreen app and it looks like the blinky/flashy stuff is gone. Nice work Scott!

scottjehl · 2012-04-21T03:14:01Z

Hey, I like waking up to news like this. Good to hear. Close this out then, shall we?

toddparker · 2012-04-21T03:24:16Z

I think we can now that we have 3 confirmations this change fixed things up. Thanks again Scott, working magic.
@scottjehl - Should I also close #3768 too? Seem to be the same...

clynton · 2013-06-15T07:47:32Z

Other suggestions worked to some degree, but I still had problems during transitions, so here's my hack. I used these values for effect, so change to your liking... Just drop it somewhere within your html

<div id="fixflickr" style="background:green;z-index:-5;position:absolute;width:420%;height:420%;left:-104%;top:-104%"> wazzow! </div>

nadacambia · 2013-08-06T15:15:18Z

I tried all the different methods (jQuery Mobile 1.3.2) on the web and nothing seems to work, it is the last issue I have before deployment. Is there away to have the flickering appear in another color (black) ?

ALSpringer · 2013-08-06T15:28:51Z

@nadacambia
You removed hardware acceleration and are still having issues?

mweimerskirch · 2013-08-11T19:58:17Z

Using

<meta name="viewport" content="width=device-width, user-scalable=no" />

in the header fixed it for me as well (on Android. I didn't try on iOS yet).

jaspermdegroot · 2013-08-13T15:58:36Z

Can you test if setting the option disablePageZoom in the fixed toolbar widget to false fixes the problem? See #5431 (comment). Thanks!

guernica777 · 2013-08-18T02:56:36Z

this issue is worse than ever on 1.4.0 alpha 2, i've tried around ten different "fixes" none successful.

dongdh · 2013-08-27T19:05:36Z

I think this whole flashing issue on IOS is because of the device-height.

if in the index.html meta content you set height=device-height, the whole flickering problem during page transition is totally gone, but then you have these problem with the page content too long and a scrollbar always appear no matter how little content you have on your page. if you dont set the height to device-height, well, you get this hellish annoying blinking. I think its because the device-height is till used to calculate some values in jqm, and in the end the difference in device-height and actual screen height differs, which cause this reset every time you load a new page, thus the blinking.

I tried with 1.3.2, 1.4.0alpha2 with height set to device height with no flickering at all during the page transition. but without height set, well...

So is there anyway to fix this somehow?

eagsalazar · 2013-08-27T19:08:20Z

This (also linked above) worked for me: http://zsprawl.com/iOS/2012/05/fixing-the-transitions-in-jquery-mobile-1-1-0/

The comment above implies that it has been fixed but it hasn't been since that fix still fixes the problem.

dongdh · 2013-08-27T20:34:48Z

@eagsalazar Well, this solution doesnt really fix the problem, the flickering still occur, just a little less, not same as set the content height=device-height, in that case no flickering at all. but then have this horrible scroll problem, Ahhhh, the lesser of two evil... or maybe just use something else instead of jqm...

eagsalazar · 2013-08-27T20:40:55Z

Eh yeah. I personally would not use it again.

On Tue, Aug 27, 2013 at 4:35 PM, dongdh notifications@github.com wrote:

@eagsalazar https://github.com/eagsalazar Well, this solution doesnt
really fix the problem, the flickering still occur, just a little less, not
same as set the content height=device-height, in that case no flickering at
all. but then have this horrible scroll problem, Ahhhh, the lesser of two
evil... or maybe just use something else instead of jqm...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4024#issuecomment-23368388
.

aniketdharia · 2013-09-13T20:57:40Z

In iOS, After the splash screen the html screen goes blank. But the buttons work fine if i tap at the right position. This is only happening in the Ios same code works fine on all the andriod devices/os.

aniketdharia · 2013-09-13T20:59:04Z

Combination of all latest versions of jqm,phonegap,jq in the app

UndiciDesign · 2013-10-31T20:07:36Z

In jquery.mobile.structure-1.3.2.min.css (because I am using a custom theme) > line 12 > changed .ui-mobile,.ui-mobile body{height:99.9%} to > .ui-mobile,.ui-mobile body {height:100.5%} worked for me.

jawinn · 2014-02-04T07:11:02Z

Any fix for this yet? Using jquery.mobile-1.4.0, jquery-1.10.2, and latest phonegap w/ newly generated android platform files. Flashing white between page changes (links with data-ajax="false").

Like some users above, I've tried dozens of these fixes, and nothing seems to work; Page transitions are none, background color important on the body, background color in android manifest, .ui-page backface-visibility in the CSS (bad, breaks other things), the meta viewport changes, setting hardwareAccelerated to false, etc.

From what I've read, this has to do with WebView when the page loads, and may be more of a phonegap issue...can't find a solution.

guernica777 · 2014-02-05T09:12:40Z

Change the default transition to slide for now, or something else. Works great for me.

--- Original Message ---

From: "jawinn" notifications@github.com
Sent: 4 February 2014 07:11
To: "jquery/jquery-mobile" jquery-mobile@noreply.github.com
Cc: "guernica777" jpno5@hotmail.com
Subject: Re: [jquery-mobile] White flash/flicker when transiting between 2 web pages in Phonegap (#4024)

Any fix for this yet? Using jquery.mobile-1.4.0, jquery-1.10.2, and latest phonegap w/ newly generated android platform files. Flashing white between page changes (links with data-ajax="false").

Like some users above, I've tried dozens of these fixes, and nothing seems to work; Page transitions are none, background color important on the body, background color in android manifest, backface hidden in the CSS (bad, breaks other things), the meta viewport changes, etc.

Reply to this email directly or view it on GitHub:
#4024 (comment)

teusink · 2014-02-11T12:52:12Z

@jawinn Not sure if that can be fixed. If you load a page without Ajax, your entire screen refreshes. Just like standard websites in a browser after clicking a link. Only on mobile the pagechange is noticed better.

I might be wrong, and perhaps someone from the jQuery Mobile team has a better answer, but I think that cannot be solved.

jawinn · 2014-02-11T19:43:36Z

@teusinkorg Seems like it. I ended up switching to use AJAX on all the pages, and it's okay now. I still get a thin white line that sometimes appears at the bottom (and sometimes stays until scrolling up/down), but that may be part of the Android 4.0.3 issues I'm encountering.

teusink · 2014-02-11T19:55:50Z

@jawinn That my be a theme "issue". Give in ThemeRoller the body a black (#000000) border in every swatch. If we are talking about the same, then it should be gine :)

MicheleV · 2014-02-18T04:30:24Z

I really have no idea why on iOS

$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "none";
});

is enough to do the trick but Android requires also what @sebikrt said:

insert in the 'head' tag:
< meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Ruffio · 2014-04-17T16:18:40Z

An issue reported two years ago, it is labeled 'priority: high' and it is still not resolved?

Is it resolved or is it because of lack of interest that it hasn't been resolved?

clynton · 2014-04-27T08:40:15Z

Yeah - was quite active for a while... Perhaps coders have discovered a solution. For those wondering, at least using pgb 3.3, I was able to completely eradicate the issue using the following.

config.xml
<preference name="auto-hide-splash-screen" value="false" />
<preference name="SplashScreenDelay" value="5000" />

js code (whenever I'm ready to - ex: after a setTimeout/etc)
navigator.splashscreen.hide();

Shouldn't matter, but for completeness, here's my viewport meta tag:
index.html
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

Cheers

ldeluca · 2014-10-29T14:22:11Z

@elfgoh @Ruffio Anyone have an update on this? Has it been fixed with the latest jQM? Just checking to see if we still need someone else to look into this or if it can be closed.

guernica777 · 2014-10-29T14:28:33Z

I think its always going to exist...

--- Original Message ---

From: "Lisa Seacat DeLuca" notifications@github.com
Sent: 29 October 2014 14:22
To: "jquery/jquery-mobile" jquery-mobile@noreply.github.com
Cc: "guernica777" jpno5@hotmail.com
Subject: Re: [jquery-mobile] White flash/flicker when transiting between 2 web pages in Phonegap (#4024)

@elfgoh @Ruffio Anyone have an update on this? Has it been fixed with the latest jQM? Just checking to see if we still need someone else to look into this or if it can be closed.

Reply to this email directly or view it on GitHub:
#4024 (comment)

Ruffio · 2014-10-29T15:41:10Z

I don't know of any updates. I don't use Phonegap and no one has made any
updates recently.

arschmitz · 2014-11-04T14:20:49Z

Since theres no activity and no objection on this ill close as patches welcome.

carterm · 2015-12-18T03:42:04Z

If this is the same problem I was having, you have to make sure to put data-theme="a" (or whichever theme letter you are using) in the fixed div. The footer "forgets" the default during transitions.

<div data-role="footer" data-id="myfooter" data-position="fixed" data-theme="a">

ghost assigned scottjehl Apr 16, 2012

toddparker mentioned this issue Apr 20, 2012

Double transitions with jqm 1.1-rc1 and phonegap 1.4.1 + fixed toolbars #3768

Closed

jaspermdegroot mentioned this issue Jul 16, 2013

Flickering issue (Using jquery.mobile.1.2.1.min.js) #6175

Closed

ghost assigned scottjehl Sep 23, 2013

Ruffio mentioned this issue Oct 7, 2014

Solution to flicker problem in jQuery mobile page transitions! #5431

Closed

arschmitz closed this as completed Nov 4, 2014

White flash/flicker when transiting between 2 web pages in Phonegap #4024

White flash/flicker when transiting between 2 web pages in Phonegap #4024

Comments

elfgoh commented Apr 12, 2012

elfgoh commented Apr 12, 2012

paragon-creations commented Apr 13, 2012

paragon-creations commented Apr 13, 2012

elfgoh commented Apr 14, 2012

elfgoh commented Apr 14, 2012

elfgoh commented Apr 14, 2012

elfgoh commented Apr 14, 2012

elfgoh commented Apr 15, 2012

elfgoh commented Apr 15, 2012

toddparker commented Apr 16, 2012

3drockz commented Apr 18, 2012

paragon-creations commented Apr 18, 2012

tegansnyder commented Apr 19, 2012

dcarrith commented Apr 19, 2012

elfgoh commented Apr 19, 2012

dcarrith commented Apr 19, 2012

scottjehl commented Apr 20, 2012

paragon-creations commented Apr 20, 2012

dcarrith commented Apr 20, 2012

scottjehl commented Apr 20, 2012

paragon-creations commented Apr 20, 2012

tegansnyder commented Apr 20, 2012

toddparker commented Apr 20, 2012

tegansnyder commented Apr 20, 2012

dcarrith commented Apr 20, 2012

scottjehl commented Apr 21, 2012

toddparker commented Apr 21, 2012

clynton commented Jun 15, 2013

nadacambia commented Aug 6, 2013

ALSpringer commented Aug 6, 2013

mweimerskirch commented Aug 11, 2013

jaspermdegroot commented Aug 13, 2013

guernica777 commented Aug 18, 2013

dongdh commented Aug 27, 2013

eagsalazar commented Aug 27, 2013

dongdh commented Aug 27, 2013

eagsalazar commented Aug 27, 2013

aniketdharia commented Sep 13, 2013

aniketdharia commented Sep 13, 2013

UndiciDesign commented Oct 31, 2013

jawinn commented Feb 4, 2014

guernica777 commented Feb 5, 2014

teusink commented Feb 11, 2014

jawinn commented Feb 11, 2014

teusink commented Feb 11, 2014

MicheleV commented Feb 18, 2014

Ruffio commented Apr 17, 2014

clynton commented Apr 27, 2014

ldeluca commented Oct 29, 2014

guernica777 commented Oct 29, 2014

Ruffio commented Oct 29, 2014

arschmitz commented Nov 4, 2014

carterm commented Dec 18, 2015