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.

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

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