Skip to content
This repository

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

Open
elfgoh opened this Issue April 12, 2012 · 128 comments
elfgoh

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.

elfgoh

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

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

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

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

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

This might be related or a duplicate #3735

elfgoh

Other related threads to track
#3768
#2856
#3674

elfgoh

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

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

Todd Parker

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

Navdeep

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

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

Tegan Snyder

same issue

Dave

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

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

Dave

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

Scott Jehl scottjehl referenced this issue from a commit April 21, 2012
Add a class while the TO page is being set up for show (block display…
…, 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
ff1a7e0
Scott Jehl

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

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

Dave

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

Scott Jehl
Paragon Ltd.

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.

Tegan Snyder

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

Todd Parker

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

Tegan Snyder

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

Dave

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!

Scott Jehl

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

Todd Parker

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

Todd Parker toddparker closed this April 20, 2012
elfgoh

Hello

Tks for the fix. It alone did not removed the issue at my end in my app. But I happened to have other suggested fixes in place that together with @scottjehl 's patch resolved the issue for me in Phonegap, iOS.

I am using trunk versions of jQuery Mobile
jQuery Mobile vGit Build: SHA1: 6b8e64a <> Date: Fri Apr 20 14:45:52 2012 -0700
jQuery Mobile Framework Git Build: SHA1: 6b8e64a <> Date: Fri Apr 20 14:45:52 2012 -0700

The additional fix that I have is:

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

Should the above be included in as well?

Todd Parker
Dave

Interesting.

elfgoh

I see. But I am baffled as to why this is still happening for my app. It is also not always reproducible. I will post again in this thread if I can find a reproducible test case.

But nevertheless, thanks for the fix as it has improved things substantially.

Todd Parker
Paragon Ltd.

Hi guys,
Sorry for my late reply..

I've also tested the latest patch and I can confirm it works for me too!!

Many many thanks! :)

One a bit unrelated question - What is the proper way to eliminate the fade that appears before some of the transitions (e.g. slideup)?

Todd Parker
Michal Letynski

There is still bug there. Flickering still occurs if content is bigger than the screen. If you scroll down the page and then tigger the transition. I see that @3drockz has the same problem. iOS 5.1

Paragon Ltd.

I noticed that too.

Found a work-around using the experimental "scrollview" module.

This is my working HEAD tag.
Note: The scrollview CSS appears inline since it currently has the "@charset.." line at the top, and it causes the CSS to be ignored for some reason..

http://test.doupto.com/example.txt

Navdeep
3drockz commented May 02, 2012

I tried the files @tegansnyder mentioned above... its still the same... the flicker looks toned down but there's still this broken page jump experience when moving between pages that have lots of content.

Usecase: Page 1 has 30 items in list view... scroll down so you're in the middle of the page, now click on any link to another page and see how badly the page flickers + jumps + looks soo broken :(

Persistant header/footers also didn't solve this...

Todd Parker

@3drockz - what transition are you using? If "slide" then there will be a visible jump to top on longer pages. All other transitions have a fade out to hide this.

Scott Jehl
Tegan Snyder

I use this:

.in,.out{-webkit-animation-timing-function: ease-in-out;-webkit-animation-duration:25ms !important;}

Navdeep
3drockz commented May 02, 2012

@toddparker Every transition feels broken, more than the transition smoothness, its the jumping in longer pages. Even data-transition="none" is jumpy :(

Navdeep
3drockz commented May 03, 2012

Oh! did I forget to mention that this only happens with FIXED headers (data-position="fixed")

Dave

@3drockz - I took a stab at fixing the jumpy and blinky transitions on Android in my app and also noticed that removing the data-position="fixed" attributes from the header and footer improves transitions 1000%. But, there is still the scrollTop call before the transition and the jump to lastscroll when going back that causes a feeling of jumpiness (which is also compounded when the back button has the attribute data-rel="back"). @iandrewfuchs provided possible solution to the window.history.back issue, but to be honest, I haven't tried his hand-rolled code yet. He and I started working together to come up with some sort of patch, but then I went out of town and haven't picked it back up yet (and, I'm not sure if he has continued working on it). Here are a couple threads that you might find interesting - it's a lot to read though:

#4129

https://forum.jquery.com/topic/to-control-the-necessary-scroll-of-a-transition-or-not-to-control-the-scroll

Navdeep
3drockz commented May 03, 2012

@dcarrith I agree... the fixed header/footers are one of the biggest issues.

I also figured that the major jump is caused when you've scrolled to the middle of a page and trigger a transition and figured that the jump is caused when JQM tries to scroll top and trigger the transition. So I explicitly set it in jQuery to auto scroll to top on every link click.

This fixes 99% of the issue and you no more see the page jumping (the 1% is just a minor flicker in the sticky header which I'm still trying to figure out).

$('a').click(function () {
$('html, body, .ui-page').animate({ scrollTop: 0 }, 0);
});

This works best either when data-transition is set to either none or fade. Hope this helps someone with this issue.

I'm still curious on the 1% on why the headers kinda still flicker when the page loads... this happens on every page load (but this wont happen when you have a multi-page template in the same HTML)

When you look at the app in the phone, its so easy for someone to look at your app's flicker/transition behavior and say it is Cordova/HTML5!

Michal Letynski

@3drockz: thanks this workaround works

Dave

@3drockz - In my testing and hacking away at the core JQM js file, I think I've isolated the reasons behind all the jumps, and flickers. Most of the jumps are caused by the scrollTop as we all know. There is another jump that happens when clicking on a back button with data-rel="back" attribute that is caused by a call to window.history.back(). In that case, it does the scrollTop, but then it jumps back down to the lastscroll of the page it is about to transition back to (before the transition actually starts).

The sole cause of the flicker seems to be the fixed headers and footers. I've been experimenting with first calling a fadeOut on the fixed footer and then removing the fixed classes so they fall inline (I only called fadeOut on the footer because it was the only one jumping around when falling inline - in the case where the content is shorter than the viewport). I do that in the startOut phase of the transition. Then, it proceeds with the transition (doneOut then startIn). After the transition is complete (end of doneIn) I add the fixed classes back to the fixed toolbars and then call fadeIn on the footer. That seemed to get rid of the flickers. Currently I have those tweaks in place in combination with the webkit-backface-visibility: hidden tweak and don't see any flickering. However, the webkit-backface-visibility style is causing strange issues on Android 2.3.7. I can't scroll now.

Navdeep
3drockz commented May 10, 2012

@dcarrith Yea, this is a good approach but, the problem is it completely ruins the user experience... its going to look strange and broken when iOS users will see header & footer hiding and revealing everytime they move between pages...

Dave

This is up for debate, and...I am no usability expert by any means...but I think as long as it is done in a controlled manner, it is acceptable and actually preferred as a trade-off to seeing the flickers. I suppose eventually the browser makers will fix whatever is causing the flickering when a css transition is used when there are data-position="fixed" elements on the page. But, for now, we need some kind of work-around. I need to go back and try @orenagiv 's suggestion above to see how that plays with my existing hacks.

Todd Parker

Hi all - we appreciate your help in tracking this down...it's a tricky issue. Keep reporting back, we're monitoring this thread.

Stephen "zSprawl" Russell
zSprawl commented May 14, 2012

I fixed the issue at least for me where you see the destination page for a second before the transition in PhoneGap/Cordova with:

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

http://zsprawl.com/iOS/2012/05/fixing-the-page-flicker-during-css-slide/

Wes Turner-Harris

I'm sad to say that none of these fixes have worked for me. I'm using cordova/phonegap 1.6.1 and jqm 1.1.0 and jquery 1.7.1. My test device is the nexus s 4g.

Transitions are nice, but the progression is as follows:

  1. Page flashes (about 1s) to white.
  2. Page slides (or whatever transition) to new page.
  3. About a 1/2s flash of the previous page.
  4. Returns to the current (transitioned-to) page.

Any help on fixing these issues would be nice. I'd really hate to scrap jqm at this point in development.

Tegan Snyder

@wturnerharris are you using the nightly versions of JQM? Try them: http://jquerymobile.com/blog/2011/04/16/latest/

I haven't used the slide transition. I personally feel transitions a little overkill right now in a phonegap application and have been disabling them.

Wes Turner-Harris

@tegansnyder — I've tried some nightlies and I still get this behavior. Upon turning off the transitions, I only now experience a white flash before getting to the next page. Is there some css for this white page?

I should mention that this white flash does NOT occur on android 2.3 (evo 4g) devices or iOS devices. Specifically this happens on 4.0+ (nexus s4g) and in the emulator running Android 4.0.3.

UPDATE 05-16-12:
I wanted to update given that I've tried this on multiple devices implementing multiple fixes from above. I've turned off all animations, which improves performance and eliminates the stutter. From what I can tell, Android 2.3 and iOS5 devices behave as expected—it goes directly to the page; however, Android 4+ does not: there is a white flash just after the old page goes out and before the new page comes in.

Does anyone have any new suggestions or can we reopen this?

Wes Turner-Harris

@scottjehl - can you replicate this issue on android 4+ ?

Tegan Snyder

@wturnerharris Here is what I have been doing with Phonegap.

I created a seperate CSS file called jqm-overrides.css where I override the css for the hover, and down state of list items. This helps with the performance on large amount of list items. Your actual css will be different depending on what theme you are using. In mine below I'm using a custom theme "e".

I then create a file called jqm-global.js

The key is to LOAD this file before you load the jquery-mobile.js

$(document).bind('mobileinit', function () {
    $.mobile.allowCrossDomainPages = true;
    $.mobile.zoom.enabled = false;
    $.mobile.buttonMarkup.hoverDelay = 0; //defaults 200
    $.mobile.defaultDialogTransition = 'none';
    $.mobile.defaultPageTransition = 'none';
});
ul.ui-listview *.ui-btn-up-e,
ul.ui-listview *.ui-btn-down-e,
ul.ui-listview *.ui-btn-hover-e {
   border: 1px solid #FBFCFE !important;
   background: #E7F1FD !important;
   font-weight: bold !important;
   color: #57576B !important;
   text-shadow: 0 1px 1px white !important;
   background-image: -webkit-gradient(linear,left top,left bottom,from( white ),to( #E7F1FD )) !important;
   background-image: -webkit-linear-gradient( white , #E7F1FD ) !important;
   background-image: -moz-linear-gradient( white , #E7F1FD ) !important;
   background-image: -ms-linear-gradient( white , #E7F1FD ) !important;
   background-image: -o-linear-gradient( white , #E7F1FD ) !important;
   background-image: linear-gradient( white , #E7F1FD ) !important;
}

ul.ui-listview *.ui-btn-up-e a.ui-link-inherit,
ul.ui-listview *.ui-btn-down-e a.ui-link-inherit,
ul.ui-listview *.ui-btn-hover-e a.ui-link-inherit { color: #57576B !important; }

 .in,.out{-webkit-animation-timing-function: ease-in-out;-webkit-animation-duration:50ms !important;}

 .ui-shadow, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b, .ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c, .ui-bar-c, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d, .ui-bar-d, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e, .ui-bar-e, .ui-overlay-shadow, .ui-shadow, .ui-btn-active, .ui-body-a, .ui-bar-a {
     text-shadow: none !important;
     box-shadow: none !important;
     -webkit-box-shadow: none !important;
 }
daveheadspace

@ tegansnyder you are an absolute star! Get yourself a beer on me.

I still had this flickering issue as recently as the nightly from 15th May 2011 despite this issue being closed. This was an absolute stop ship for me. My JQM phonegap app now looks perfectly respectable on a HTC Wildfire with Android 2.2.1.

Just setting the defaulttransition='none' was NOT sufficient for me as describe in this stackflow post http://stackoverflow.com/questions/10400806/jquery-mobile-code-for-flickering-navigation-with-phonegap

Tegan Snyder

@daveheadspace excellent! glad I could help.

Wes Turner-Harris

@tegansnyder — Thanks for your recommendations. Disabling the transition animations greatly improved performance.

I did however find the issue for Android 4 re: flickering, which was not in fact jquery mobile at all. We were using hardware acceleration in our AndroidManifest.xml.

If anyone else has this problem, simply remove: android:hardwareAccelerated="true" from the activity in question. Also some may have problems with the various css tweaks across different versions of Android when using -webkit-backface-visibility and -webkit-translate3d/X/Y/Z properties. Hope this helps.

Alexander Casassovici

not sure why the issue is closed , but I do have this issue too :/
Tried all the fixes above none worked for me
On mobile safari everything is ok,
on phonegap "slide" "back" does not blink , but "slide" does :(

Wes Turner-Harris

@allexksso - you should probably mention what device/version/etc you're using.

Alexander Casassovici

@wturnerharris ios5.1 emulator and device, phonegap 1.7.0, jqm 1.1.0 (tried nightly - no luck)
and the code is here : https://github.com/Diveboard/diveboard-mobile/tree/purehtml5

tastykhana

Well these small changes definitely worked wonders for my phonegap application, phonegap 1.7.0, Jqm 1.1.0 (nightly had a few problems for me so added the changes my self to the file based on the github commits by @scottjehl ). The flicker did not occur on the iOS 5.1 device and emulator after the changes were added.

Alexander Casassovici

Diveboard@ff125b6 fixes the issue - it's probably an ugly monkey-patch but should probably help out the experts around converging to a proper resolution

7hor
7hor commented June 03, 2012

Hello there,
I still have a small issue using the nightly version of jquery with phonegap and a multi-page style application.
On the very first transition, my current page blink white for a second, and then transition correctly. Is there any first for that ?

PS: Thanks again, your work is awesome !

Tobias Munk

The "monkey-patch" from @alexksso helped me a lot for slide transitions. Thanks!

Alexander Casassovici

@schmunk42 anytime :) would still like for somebody to make a clean fix - I'm not especially proud of mine :D

christophercarlsson

I'm having this issue aswell, but I can't seem to fix it with any of the fixes in here. How do I implement @alexksso patch?

Tobias Munk

@christophercarlsson Have a look at the patch-code here: Diveboard@ff125b6 you'll just have to add two lines to jquery.mobile.transition.js and use the non-minified version.

christophercarlsson

@schmunk42 I don't have the transition file, and if I include the code from that link it still doesn't work for me. Flickers like crazy :(

Alexander Casassovici

@christophercarlsson get my code and build it if u don't build the jquery mobile from sources it ain't gonna work... (read README)

Todd Parker toddparker reopened this June 13, 2012
Jasper de Groot
Owner

I am closing this issue now the patch from @alexksso has landed. If there are still issues you can comment here and we reopen (again).

Jasper de Groot uGoMobi closed this June 16, 2012
Jameson Stafford

After much pain & suffering with 1.1.0 transitions + Phonegap, I've found a nice combination that works for me. Hopefully this might help anyone in my shoes who stumbles across this thread. For reference, my environment is JQM 1.1.0, JQuery 1.7.1, Phonegap 1.7.0, built via Phonegap Build.

Sprawl has a nice post here: http://zsprawl.com/iOS/2012/05/fixing-the-transitions-in-jquery-mobile-1-1-0
about rolling back to 1.0.1 transitions while moving forward with 1.1.0 base.

I implemented the code from that post, then added the fix referenced in this thread
Diveboard@ff125b6
to his javascript (the "startIn" function).

Then for good measure, I updated his transitioning CSS to his later post:
http://zsprawl.com/iOS/2012/05/fixing-the-page-flicker-during-css-slide
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
width: 100%;
height: 100%;
overflow: visible;
}

After this is in place, I get the smooth 1.0.1 transitions with no flicker or jumping. So much nicer. I really hope 1.1.1 brings many improvements to the transitions. I've been battling this for days, and it's been very disheartening to say the least.

Preetha

I can't get white screen issue fixed with the @scottjehl suggested changes. BTW, i am referring to the case using 'data-postion=fixed'. Do i have to do anything extra along with @scottjehl changes when i use this particular property ??.

Scott Jehl scottjehl referenced this issue from a commit April 21, 2012
Add a class while the TO page is being set up for show (block display…
…, 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
f164821
hobe
hobe commented July 10, 2012

Latest code still flashes without adding -webkit-backface-visibility!
Fortunately, if I add "-webkit-backface-visibility: hidden" style, the white flash between page transitions is gone (in browser and fullscreenmode), but there are still some issues (see below)

Here is my testing code: http://jsfiddle.net/5HJEs/

Tested on iPhone 3GS/4, iPad1 with iOS 5.1.1

That's what I've experienced:

  • Header bar jumps in browser after fade out of first page and before fade in of the second page (4 pixels down and then back to the top - screenshot: http://sdrv.ms/NFg16F)
  • Header bar does NOT jump in fullscreen mode (after adding webpage to home-screen)
  • Header bar sometimes flashes when scrolling fast to the bottom of the page (ONLY in fullscreenmode, not in browser mode!)
  • when I press back button, sometimes the whole page completely disappears and re-renders (white/gray background image, see screenshot: http://sdrv.ms/MX9pnr)

Unfortunately I need smooth transitions without flickering or any other strange behaviors for my app, otherwise it is an absolute show-stopper!
At least iOS should work without those strange behaviors! Are there any suggestions which may help me temporarily?

Alexander Casassovici

hi Hobe,

unfortunately it seems like you should try and setup a few breakpoints on the transitions and see which line is misplaced - sounds like there's not 1 solution fits all in that case. FYI the webkit rendering the page on phonegap is not using the same render/js engine as safari mobile (it uses an older version) so this is I guess why all the mess...

good luck !

Hemant-Patil

We have tried the latest code but the issue still persists. We have made few changes to JQM code and it seems to be working fine for us.

Solution:

We noticed few weird things i.e. target page were being pushed in to view, before the actual transition were happening. Second problematic thing seems to be the height and scroll of target page. It was adjusted after the page is pushed in to view.

Below are the original lines of JQM code: [ Code reference – Line number 2241, Function name: ‘startin’ ]

/******************************************************************************************************/
1. $to.addClass( $.mobile.activePageClass );
2.

3. // Target page is being pushed in to view
4. $.mobile.focusPage( $to );
5.

6. // adjusting the height of page after pushing it in to view
7. $to.height( screenHeight + toScroll );
8.

9. // Invoking actual page transition.
10. scrollPage();
/******************************************************************************************************/

Rearranging above lines actually fix the issues. Most importantly it has not shown any negative impact on the regular behaviour of JQM library.

Below are the lines of JQM code adjusted in-order to resolve our issues:

/******************************************************************************************************/
1. // Adjusting the page height.
2. $to.height( screenHeight + toScroll );
3.

4. // Invoking actual page transition.

5. scrollPage();
6.

7. // Activating target page after transition is done.
8. $to.addClass( $.mobile.activePageClass );
9.

10. // push target page in to view.
11. $.mobile.focusPage( $to );
/******************************************************************************************************/

Please let me know if it helps anyone.

Zoltan Varady

Here's a fix I found that fixed the flicker for me (JQM 1.1.1, PhoneGap 2.0) - it inserts a container between the body and JQM pages:

http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/

NGUYEN DINH Quoc-Huy

Tested with 1.1.1 and 1.2.0-beta and it still flickers inside phonegap.
But Hemant-Patil's patch did fix it for me, thanks!

Eirik Hoem

Works fine in 1.1.1, but it seems like this is reintroduced for 1.2.0 (only on back navigation).

Charlie Gorichanaz

Hemant-Patil's patch also did it for me, Cordova (PhoneGap) 2.0.0 and jQM 1.1.1

Jasper de Groot
Owner

@Hemant-Patil - Thanks for posting your solution!

I reopened the issue with milestone 1.2.1. After 1.2 has been released we can make the suggested change on master and test it thoroughly.

@scottjehl - Maybe you can look at the suggested reorder too before we commit.

@toddparker - Do you agree with this?

Jasper de Groot uGoMobi reopened this September 15, 2012
Todd Parker

If this checks out, it would be great to get this in. @scottjehl - see any issues with changing the order of these?

Jasper de Groot
Owner

When testing this we should also take a look at #4387

Scott Jehl

@toddparker:

Before considering adding a new container, did we confirm that body { width: 100%; height: 100%; position: absolute; } doesn't fix this in a similar way?

If so...

Are we proposing here that the framework should add another container, dynamically, as a child of the body all the time? Or should it only do so in phonegap/offline scenarios? Or should we recommend that people building for android in phonegap follow the steps outlined in the article above?

I'm concerned that wrapping our pages in a generated container goes in the opposite direction we are currently headed, in that it imposes another JS manipulation step to the entire dom before the page can be shown, properly styled. But we also don't want to add static boilerplate markup to our requirements, as the example showed.

Did we consider the possibility of offering an optional plugin for phonegap scenarios that will generate this wrapper div and set the $.mobile.pageContainer to reference it, but not do this by default all the time?

Scott Jehl

oh, sorry! I read the wrong "patch" above. I'll take a look and answer again.

Scott Jehl

Okay sorry, now I see.

So, if we switch the order of these actions, it's likely we'll break more than a couple features of transitions - the order here took a lot of work to get right, unfortunately. Adding the activePageClass currently happens first, as it makes the page visible so it can be scrolled to a remembered location, if there is one. With the page hidden, we won't be able to scroll to a remembered location in the page, which is a commonly expected browsing feature. Also, calling focus after scrolling the page will negate the scroll, since focusing the page jumps to top.

pannal

This is still open?

justinledelson

What's the status thus far?

fandang

I was seeing this flickering for a while in a project - just upgraded my project to jquery-1.8.2 and jquery.mobile-1.2.0 and the flickering is gone. Just saying "<div data-role="header" data-position="fixed">" and same for footers does the trick.

DoobleD

Still experiment flickering on Android 2.3 with Cordova 2.1 and JQM 1.2, and jQuery 1.8.2.

Same with Android 4.0 except that using the "animation-fill-mode" trick fixed flickering (http://jquerymobile.com/test/docs/pages/phonegap.html).

Transitions are smooth on iPhone/iPad emulator running iOS6.

adam-ml

In JQM 1.2, android 4.0.4, native webview and native browser https://github.com/jquery/jquery-mobile/blob/master/js/widgets/fixedToolbar.js#L153 is guilty of producing a flicker when transitioning to pages that have fixed toolbars.

iOs is fine both in iPhone and iPad.
Google chrome for android is also ok

Confirmed to affect android <= 4.0.4 native browser/webview

Nick Young

I just thought I'd confirm what others are saying about fixed toolbars causing a flickering issue on Android.

This issue occurs even when the page transition is set to none.
It seems to affect Android 3.0-4.2 only, which makes me suspicious of a bad interaction with Hardware Acceleration, which was introduced in Android 3.0 and is currently enabled by default by Adobe's PhoneGap Build service.

adam-ml
Thomas Testasecca

Hi encountered a similar problem (see #5398) during page transition on JQM 1.2 (i had a 1 px white line flashing at the botom of the screen).

Setting this in my main css solved the problem !!!

.ui-mobile, .ui-mobile body {
height: 100% !important;
}

Hoping it will be included in the next version of JQM.
Regards
Tom

doom777

I second @nickwb comment. I am seeing white page flicker with cordova 2.2, jqm1.2, and jquery1.8.3. Transition none and transition fade don't solve it. Gingerbread works fine. Honeycomb works fine, at least on an emulator. Ice Cream sandwich and Jellybean show the white flicker on an emulator. Running in chrome is also fine. This isn't 1px; this is full page.

Ok, I got it! Make sure your meta viewport tag matches the following regex:
/(user-scalable[\s]=[\s]*no)|(maximum-scale[\s]=[\s]*1)[$,\s]/
I had user-scalable set to 0, and maximum-scale to 1.0, so it failed and caused flicker with the zoom plugin

Nick Young

Hi @doom777, you're my new best friend - this has resolved my issues!
I really appreciate you looking in to this.

mengjang

Just wanted to report that I'm still seeing the white flash between two pages (when the content is bigger than the window) on iPhone 3GS running iOS 6.1, with JQM 1.3 beta, PhoneGap 2.2, and JQuery 1.8.2 (or 1.8.3), and $.mobile.defaultPageTransition = 'none'.

I don' t use fixed position for the header. The header is given a fixed height in the CSS. My page has a list whose content is generated dynamically:

    <div data-role="page" id="pageB_id">
        <div data-role="header" data-theme="m">
            <h1></h1>
            <a href="#settings">Settings</a>
            <a href="pageA.html">Home</a>
        </div>
        <div data-role="navbar" class="custom-icons">
            <ul>
                <li><a href="pageA.html" data-icon="custom" id="pageA-icon">pageA</a></li>
                <li><a href="#" data-icon="custom" id="pageB-icon" class="ui-btn-active ui-state-persist">pageB</a></li>
            </ul>
        </div>
        <div data-role="content">
                <ul data-role="listview" class="ui-listview" id="pageB_list">
                </ul>
        </div>
    </div>

What has made the white flash go away is the code in http://zsprawl.com/iOS/2012/05/fixing-the-transitions-in-jquery-mobile-1-1-0, as mentioned in @jjstaffords's post.

$(document).bind("mobileinit", function(){
$.mobile.defaultTransitionHandler = function( name, reverse, $to, $from ) {

    var deferred = new $.Deferred(),
        sequential = false,
        reverseClass = reverse ? " reverse" : "",
        active  = $.mobile.urlHistory.getActive(),
        toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
        screenHeight = $.mobile.getScreenHeight(),
        maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
        none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
        toggleViewportClass = function(){
            $.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
        },
        scrollPage = function(){
            // By using scrollTo instead of silentScroll, we can keep things better in order
            // Just to be precautios, disable scrollstart listening like silentScroll would
            $.event.special.scrollstart.enabled = false;

            window.scrollTo( 0, toScroll );

            // reenable scrollstart listening like silentScroll would
            setTimeout(function() {
                $.event.special.scrollstart.enabled = true;
            }, 150 );
        },
        cleanFrom = function(){
            $from
                .removeClass( $.mobile.activePageClass + " out in reverse " + name )
                .height( "" );
        },
        startOut = function(){
            // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
            if( !sequential ){
                doneOut();
            }
            else {
                $from.animationComplete( doneOut ); 
            }

            // Set the from page's height and start it transitioning out
            // Note: setting an explicit height helps eliminate tiling in the transitions
            $from
                .height( screenHeight + $(window ).scrollTop() )
                .addClass( name + " out" + reverseClass );
        },

        doneOut = function() {

            if ( $from && sequential ) {
                cleanFrom();
            }

            startIn();
        },

        startIn = function(){   
            $to.css("z-index", -10);                                 
            $to.addClass( $.mobile.activePageClass );               

            // Send focus to page as it is now display: block
            $.mobile.focusPage( $to );

            // Set to page height
            $to.height( screenHeight + toScroll );

            scrollPage();
            $to.css("z-index", "");
            if( !none ){
                $to.animationComplete( doneIn );
            }

            $to.addClass( name + " in" + reverseClass );

            if( none ){
                doneIn();
            }

        },

        doneIn = function() {

            if ( !sequential ) {

                if( $from ){
                    cleanFrom();
                }
            }

            $to
                .removeClass( "out in reverse " + name )
                .height( "" );

            toggleViewportClass();

            // In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
            // This ensures we jump to that spot after the fact, if we aren't there already.
            if( $( window ).scrollTop() !== toScroll ){
                scrollPage();
            }

            deferred.resolve( name, reverse, $to, $from, true );
        };

    toggleViewportClass();

    if ( $from && !none ) {
        startOut();
    }
    else {
        doneOut();
    }

    return deferred.promise();
};
$.extend($.mobile, {
    defaultPageTransition: "none",
});

});

mengjang

I've realized that most of the code in http://zsprawl.com/iOS/2012/05/fixing-the-transitions-in-jquery-mobile-1-1-0 is already in jQM (at least 1.2.0). I think the following is what's still needed to make the white flash go away when $.mobile.defaultPageTransition is set to "none":

$.mobile.transitionHandlers = {
"default": $.mobile.defaultTransitionHandler,
"sequential": sequentialHandler,
"simultaneous": simultaneousHandler,
"none": simultaneousHandler
};

If the JQM team agrees, I've love to see this change make it into 1.3.0.

Thanks.

aalaap

This is still happening on Android 4.2.1. Using jQM 1.3.0 and Cordova 2.3.0.

ALSpringer

@aalaap
Did you remove "android:hardwareAccelerated" from your AndroidManifest.xml as per the @wturnerharris post?
I was having a lot of issues with flickering on fixed headers until I removed hardware acceleration. Was testing on a Nexus 7 with Android 4.2.2, JQM 1.3, Jquery 1.8.2, and Cordova 2.4.0

aristotelos

I still get this issue. It is reproducible with data-position="fixed" on header and footer toolbars and when placing a shortcut to a webpage on your iPad desktop (not in the normal browser, only when the browser is started from the shortcut). There is also a slight flickering when a dialog with a search list is loaded. Using the options data-update-page-padding="false" or data-transition="none" or data-disable-page-zoom="false" on the fixed toolbars does not help.

The CSS fix with position: fixed instead of data-position="fixed" does not help too.

I tried CSS

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

but this only makes it worse for me.

sebikrt

To all that have flashes when the page loads, 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" />

This should fix any problems.

Cheers!

tomandersen

For me, I got flicker and blinking when a slide in panel was installed. The blinking funnily enough happens even when the panel is hidden, and for me occurred on collapsible elements.

My 'solution' was to add this to my css file: (as suggested from http://api.jquerymobile.com/panel/ )
div {
-webkit-transform: translate3d(0,0,0);
}

Which sounds crazy - but 'worked for me'. (Yes all divs)

Seems that there are no side effects seen - yet.

vladimirGI

the above solution breaks long pages & a header. I have a header which contains a centered group control of buttons

tomandersen

vladimirGI, I frankly did not expect that adding that to every div would work. Try adding it to certain classes or div ids only.

vladimirGI

i am not sure what divs did you add? are you referencing in div inside a header or a panel (btw: my panel works perfect)

Joram Teusink

Workaround:
Change
<meta name="viewport" content="width=device-width, initial-scale=1" />
to
<meta name="viewport" content="width=device-width, user-scalable=no" />
In the header of your HTML file(s).

The flicker is then gone.

clynton

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>
Erik

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

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

Michel Weimerskirch

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

Jasper de Groot
Owner

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

guernica777

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

dongdh

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

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

@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
Aniket Dharia

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.

Aniket Dharia

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

UndiciDesign

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

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
Joram Teusink

@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

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

Joram Teusink

@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

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" />

Rasmus Christiansen

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.