jquery mobile - Page flickers on loading of long ListView in iPhone

Question

I am developing a phone gap application for ios and using Backbone.js jQuerymobile and jQuery to load my list-view.

The page flickers when ever a long listview loads or just becomes visible. This doesnot happen with listviews with smaller length like 6 to 7 elements.

I have already used -webkit-backface-visibility: hidden; for .ui-page . I am not getting this problem in android

Answer 1

The flickering in my page is caused because of dom reflow.

since i am adding content to the listview dynamically, dom reflow was happening everytime i add an element to the listview which is causing the flickering in my page.

I have changed my dome structure to make sure that the element comes directly under the with data-role="content" so that reflow doesn't effect any other elements.