jquery mobile page flicker

Question

after page load and when doing listview('refresh') the page flickers.

So after transition get a flicker and after $('#friendsList').append('#{data}').listview('refresh'); I get a flicker

tried adding

<style>
/*** for jquerymobile page flicker that was happending ***/
 .ui-page {
    -webkit-backface-visibility: hidden;
 }  
</style>

EDIT

When refreshing the listview, I understand the flicker inside the listview but is it suppose to make the entire page flicker to?

EDIT 2

If list height is > screen height page flickers. If list height < screen height page doesn't flicker.

Littoral

And your question is...? – Kummerbund

Its still flickering even on page load – Littoral

which version of JQM are you using? – Klagenfurt

Answer 1

If anyone is having the same issue as above where page flickers during transition when:

page content height > screen height

This is somehow related to the header/footer provided by JQM. To fix this:

1) Remove all data-position="fixed" from the headers/footers.

2) Include the following CSS to provide the same effect (but without flickering)

.ui-page {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    height: 40px;
}
.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}

Heavyarmed

Wow, I've been looking for this fix for weeks. The -webkit-backface-visibility change didn't do it by itself. I needed the position fixed change as well. Thanks. – Qintar

@Amulya I did the same...although it does remove the flickering, I now face the fact that the menu bars can jump positions on the page (e.g. to the middle) and that the scrolling doesn't work as smoothly anymore: normally when scrolling and releasing the page continues to scroll for a bit and then stops, but now I scroll and when I release my finger the page instantly stops scrolling. – Hennessey

Answer 2

Remove data-position="fixed" works, but I have to keep those attribute. Finally I fixed by change viewport meta tag:

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

Here is the link I find the answer: Flickering when navigating between pages

Stirrup