Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » Fixing the Page Flicker During CSS Slide

Fixing the Page Flicker During CSS Slide

Published on May 9th, 2012 by in Blog, CSS, jQuery Mobile

Recently, I posted a really popular post on how to revert back to jQuery Mobile 1.0.1 transitions. It works pretty dang well for the most part, but still suffers from some of the issues previously documented. For example, there is generally a page flicker at the end of the transitions on the iPad. This can be fixed with the following CSS code.

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

However, this isn’t good enough for the iPhone. When using fancy listviews or collapsible divs, during the slide transition, there is a flicker of the destination page as it is prepped to be moved into view. After fighting it for hours, commenting out portions of my code, I finally figured out how to fix it with yet another simple CSS statement.

1
2
3
4
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    overflow: visible;
}
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    overflow: visible;
}

That last one kinda makes sense. It allows the destination page to be moved into view off the screen, rather than causing the brief flash as it is moved into the frame. I guess… anyhow it worked great, so I thought I’d share.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

20 Responses

  1. Craig

    Thank you sir, this info kept me from running my head through my monitor!

    Craig

  2. RG

    I was just testing this in JQM 1.1.0 and it does not work.

    I had put the code in the head section. Does it work with JQM 1.1

    .ui-li {
    max-height: 45px;
    position: center;
    }
    .ui-mobile-viewport-transitioning,
    .ui-mobile-viewport-transitioning .ui-page {
    overflow: visible;
    }

  3. RG

    So you are saying that if I have a long scroll list of about 70 items, i have to switch back to 1.01 transitions as you have explained in your post?

    • You don’t have to. Some people love the new transitions, which have a pageOut effect followed by a pageIn effect. I prefer the original where both happened at the same time. It looks cleaner. YMMV.

  4. RG

    I am actually disgusted with the whole “Transition Bug” where if you have a long list view, you cannot apply a slide transition without a white blink.

    My question was does your code fix the “Transition Bug” ?

  5. Arghhtt, I hate 1.1 transitions!

  6. Very sadly, this doesn’t work for me. I tried making the change within the transitions.css file from your last post (since .ui-mobile-viewport-transitioning & same + .ui-page are in there already) and directly on index.html in a styles section. My results are:

    1. slideup always shows a flicker of the transition-to page before transitioning.

    2. slidedown does not show the flicker, but has an unacceptably long pause before beginning the transition.

    2a. The unacceptable pause is bad because the 1.1 code seems very unstable, and if you click almost anything more than once it either breaks something or completely crashes the app.

    3. slide or slide reverse both get the flicker effect when clicked, BUT…

    3a. When the EXACT SAME code is called on swipe, the flicker effect DOES NOT happen.

    I’m starting to think this is all related to a delay on the click event, since the same code fired with the swipe event does not cause the issue. Have you seen this?

  7. Jonathan D

    This works! Confirmed on iOS 5.1/Phonegap app. Thanks a ton, my jQuery toolbar transitions have no flicker and are fixed! You are the man!

  8. Anas

    Work fine , but i have problem with text box input the page jump up and down when i type on text box or text area 🙁

  9. Jon Tara

    Thanks! This really cleaned-up the “flip” transition on 1.1.1, even without reverting to the 1.0 transitions. I think I have less trouble overall, because I am using iScroll, and all my pages are device height. So, there is no scroll to the top, but still the unnecessary fades, so next I will put in the 1.0 transitions.

  10. Manish

    I think it doesn’t work with jquery mobile 1.1.1 + phonegap on iOS 5.1.1
    The page transition still is jerky.

  11. Joe

    Thank you good sir, we’ve searched desperately for a fix for hours!

  12. Hi ZSprawl, this is some good stuff which I’ve used several times. However, I’ve now run into the situation where under Android 4.03 on non-nexus devices, people get white screens for some reason after the transition.

    The first 2 pages work fine but the rest shows up white. People see jQuery’s header bar, but not the content.

    I can actually reproduce it in the emulator.

    Would you happen to have a vague clue of what the fudge that may be?

    Thanks a LOT in advance!

  13. Aditya

    It works great!Thanks a lot!

Leave a Reply to Joe Cancel reply

Your email address will not be published. Required fields are marked *

© 2012 zSprawl's zApps

Fork me on GitHub