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

elfgoh commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

This might be related or a duplicate https://github.com/jquery/jquery-mobile/issues/3735

elfgoh commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

same issue

dcarrith commented 12 years ago

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 commented 12 years ago

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

dcarrith commented 12 years ago

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

scottjehl commented 12 years ago

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: https://github.com/jquery/jquery-mobile/commit/ff1a7e019f45ad00fc9aa3e0fcb08df5acc54a66

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 commented 12 years ago

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

dcarrith commented 12 years ago

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

scottjehl commented 12 years ago

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: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5251537

paragon-creations commented 12 years ago

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 commented 12 years ago

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

toddparker commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

toddparker commented 12 years ago

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

elfgoh commented 12 years ago

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: 6b8e64a346bfdd8d5fe5de7705aee5459fb880a1 <> Date: Fri Apr 20 14:45:52 2012 -0700 jQuery Mobile Framework Git Build: SHA1: 6b8e64a346bfdd8d5fe5de7705aee5459fb880a1 <> 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?

toddparker commented 12 years ago

Using backface-visibility may work well for you, especially on simpler pages, but understand that it uses a lot of memory and can cause devices to cras for this reason, we wouldn't feel comfortable adding this as a blanket rule in our stylesheet.

Info here: http://cubiq.org/you-shall-not-flicker

So, feel free to add this because it can improve rendering quite a bit, but test thoroughly and know the risks.

On Apr 21, 2012, at 4:57 AM, "elfgoh" reply@reply.github.com wrote:

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: 6b8e64a346bfdd8d5fe5de7705aee5459fb880a1 <> Date: Fri Apr 20 14:45:52 2012 -0700 jQuery Mobile Framework Git Build: SHA1: 6b8e64a346bfdd8d5fe5de7705aee5459fb880a1 <> 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?

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5259102

dcarrith commented 12 years ago

Interesting.

elfgoh commented 12 years ago

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.

toddparker commented 12 years ago

This seems to completely resolve fixed toolbars and fade but as things get more complex, devices have a harder time keeping up. More complex transitions like flip or persistent toolbars may still have some artifacts.

On Apr 21, 2012, at 11:02 AM, "elfgoh" reply@reply.github.com wrote:

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.

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5261079

paragon-creations commented 12 years ago

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

toddparker commented 12 years ago

To make slide up or down work like 1.0, you can create a new transition CSS and JS file by copying the existing and giving it a new name. In the JS, use the sync handler instead of sync and edit the CSS to remove fade in and fade out and copy the relevant slide parts of the transition from 1.0. Look at slide vs. slidefade to see an example.

On Apr 21, 2012, at 12:36 PM, "orenagiv" reply@reply.github.com wrote:

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

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5261719

mletynski commented 12 years ago

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-creations commented 12 years ago

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

3drockz commented 12 years ago

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

toddparker commented 12 years ago

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

scottjehl commented 12 years ago

You could change the keyframes to a 0ms opacity shift if you just want to hide without a fade On May 3, 2012 7:27 AM, "Todd Parker" < reply@reply.github.com> wrote:

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

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5476755

tegansnyder commented 12 years ago

I use this:

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

3drockz commented 12 years ago

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

3drockz commented 12 years ago

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

dcarrith commented 12 years ago

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

https://github.com/jquery/jquery-mobile/pull/4129

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

3drockz commented 12 years ago

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

mletynski commented 12 years ago

@3drockz: thanks this workaround works

dcarrith commented 12 years ago

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

3drockz commented 12 years ago

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

dcarrith commented 12 years ago

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.

toddparker commented 12 years ago

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

zSprawl commented 12 years ago

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/

jquery-archive / jquery-mobile

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