Flicker issue with jqm listview. If removing one list item from the top using $('.list').remove() is followed by the listview.refresh() then the listview.refresh() api causes UI flicker.
We are using jquery mobile listview with jquery mobile scrollview plugin. Listview is used to show the data records from the server. So if the there say 20 records in the list view but it shows only 6 at a time in the list view and rest all are hidden by the scrollview plugin. User can scroll through all the records using scrolling (down\up) provided by the plugin. Once the user has reached the end of the current set (last record or 'li' element) it request the server for next 5 records. Once the records are available on the client side we are appending those records in the listview at the bottom and at the same time we are removing the top five listview records(li elements that currently hidden) from the top . This addition and deletion of the records are hidden to the user .The new records are added silently to the bottom and old records(from the top) that are hidden from the user (user is in last 6 records so top five are invisible ) are removed.
But the issue is that if removing the listview records followed by the listview.refresh() then listview.refresh() causes a UI flicker and we can't avoid the call to listview.refresh(), it looks like records that you are seeing (not updated in this process) goes away for a sec and comes back and it seems all the li elements are updated by refresh. Ideally listview.refresh() should enhance the only the li elements that are newly added not all the li elements in the list.