New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
elfgoh opened this Issue Apr 12, 2012 · 134 comments

Comments

Projects
None yet
@elfgoh

elfgoh commented Apr 12, 2012

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

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 12, 2012

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.

elfgoh commented Apr 12, 2012

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 13, 2012

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

ghost commented Apr 13, 2012

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 13, 2012

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

ghost commented Apr 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 14, 2012

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 Apr 14, 2012

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

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 14, 2012

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 Apr 14, 2012

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 comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 14, 2012

This might be related or a duplicate #3735

elfgoh commented Apr 14, 2012

This might be related or a duplicate #3735

@elfgoh

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 14, 2012

Other related threads to track
#3768
#2856
#3674

elfgoh commented Apr 14, 2012

Other related threads to track
#3768
#2856
#3674

@elfgoh

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 15, 2012

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 Apr 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 15, 2012

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

elfgoh commented Apr 15, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 16, 2012

Contributor

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

Contributor

toddparker commented Apr 16, 2012

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

@ghost ghost assigned scottjehl Apr 16, 2012

@3drockz

This comment has been minimized.

Show comment
Hide comment
@3drockz

3drockz Apr 18, 2012

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

3drockz commented Apr 18, 2012

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 18, 2012

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

ghost commented Apr 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@tegansnyder

tegansnyder commented Apr 19, 2012

same issue

@dcarrith

This comment has been minimized.

Show comment
Hide comment
@dcarrith

dcarrith Apr 19, 2012

Contributor

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.

Contributor

dcarrith commented Apr 19, 2012

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

This comment has been minimized.

Show comment
Hide comment
@elfgoh

elfgoh Apr 19, 2012

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

elfgoh commented Apr 19, 2012

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

@dcarrith

This comment has been minimized.

Show comment
Hide comment
@dcarrith

dcarrith Apr 19, 2012

Contributor

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

Contributor

dcarrith commented Apr 19, 2012

@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 pushed a commit that referenced this issue Apr 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Apr 20, 2012

Contributor

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?

Contributor

scottjehl commented Apr 20, 2012

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?

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 20, 2012

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

ghost commented Apr 20, 2012

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

@dcarrith

This comment has been minimized.

Show comment
Hide comment
@dcarrith

dcarrith Apr 20, 2012

Contributor

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

Contributor

dcarrith commented Apr 20, 2012

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

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Apr 20, 2012

Contributor

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)

Contributor

scottjehl commented Apr 20, 2012

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)

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 20, 2012

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.

ghost commented Apr 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@tegansnyder

tegansnyder Apr 20, 2012

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

tegansnyder commented Apr 20, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 20, 2012

Contributor

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

Contributor

toddparker commented Apr 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@tegansnyder

tegansnyder Apr 20, 2012

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

tegansnyder commented Apr 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@dcarrith

dcarrith Apr 20, 2012

Contributor

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!

Contributor

dcarrith commented Apr 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Apr 21, 2012

Contributor

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

Contributor

scottjehl commented Apr 21, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 21, 2012

Contributor

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

Contributor

toddparker commented Apr 21, 2012

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

This comment has been minimized.

Show comment
Hide comment
@clynton

clynton Jun 15, 2013

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>

clynton commented Jun 15, 2013

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

This comment has been minimized.

Show comment
Hide comment
@nadacambia

nadacambia Aug 6, 2013

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

nadacambia commented Aug 6, 2013

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

This comment has been minimized.

Show comment
Hide comment
@ALSpringer

ALSpringer Aug 6, 2013

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

ALSpringer commented Aug 6, 2013

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

@mweimerskirch

This comment has been minimized.

Show comment
Hide comment
@mweimerskirch

mweimerskirch Aug 11, 2013

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

mweimerskirch commented Aug 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 13, 2013

Member

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

Member

jaspermdegroot commented Aug 13, 2013

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

@guernica777

This comment has been minimized.

Show comment
Hide comment
@guernica777

guernica777 Aug 18, 2013

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

guernica777 commented Aug 18, 2013

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

@dongdh

This comment has been minimized.

Show comment
Hide comment
@dongdh

dongdh Aug 27, 2013

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?

dongdh commented Aug 27, 2013

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 comment has been minimized.

Show comment
Hide comment
@eagsalazar

eagsalazar Aug 27, 2013

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.

eagsalazar commented Aug 27, 2013

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

This comment has been minimized.

Show comment
Hide comment
@dongdh

dongdh Aug 27, 2013

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

dongdh commented Aug 27, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@eagsalazar

eagsalazar Aug 27, 2013

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
.

eagsalazar commented Aug 27, 2013

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

This comment has been minimized.

Show comment
Hide comment
@aniketdharia

aniketdharia Sep 13, 2013

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 commented Sep 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@aniketdharia

aniketdharia Sep 13, 2013

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

aniketdharia commented Sep 13, 2013

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

@ghost ghost assigned scottjehl Sep 23, 2013

@UndiciDesign

This comment has been minimized.

Show comment
Hide comment
@UndiciDesign

UndiciDesign Oct 31, 2013

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.

UndiciDesign commented Oct 31, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jawinn

jawinn Feb 4, 2014

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.

jawinn commented Feb 4, 2014

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

This comment has been minimized.

Show comment
Hide comment
@guernica777

guernica777 Feb 5, 2014

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)

guernica777 commented Feb 5, 2014

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

This comment has been minimized.

Show comment
Hide comment
@teusink

teusink Feb 11, 2014

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

teusink commented Feb 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@jawinn

jawinn Feb 11, 2014

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

jawinn commented Feb 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@teusink

teusink Feb 11, 2014

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

teusink commented Feb 11, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@MicheleV

MicheleV Feb 18, 2014

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

MicheleV commented Feb 18, 2014

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

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Apr 17, 2014

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?

Ruffio commented Apr 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@clynton

clynton Apr 27, 2014

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

clynton commented Apr 27, 2014

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

This comment has been minimized.

Show comment
Hide comment
@ldeluca

ldeluca Oct 29, 2014

Contributor

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

Contributor

ldeluca commented Oct 29, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@guernica777

guernica777 Oct 29, 2014

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)

guernica777 commented Oct 29, 2014

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

This comment has been minimized.

Show comment
Hide comment
@Ruffio

Ruffio Oct 29, 2014

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

Ruffio commented Oct 29, 2014

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

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Nov 4, 2014

Member

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

Member

arschmitz commented Nov 4, 2014

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

@arschmitz arschmitz closed this Nov 4, 2014

@carterm

This comment has been minimized.

Show comment
Hide comment
@carterm

carterm Dec 18, 2015

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

carterm commented Dec 18, 2015

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">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment