Scrolling issue on android 5 Lollipop

[seth100]

Hi,

I have developed a cordova app and I'm testing it on my phone with Android 5.0 Lollipop. I found a problem with Android hardware acceleration, if it's enabled there are CSS rendering issues as you can see in this video: https://vid.me/gb0n.

Look at the white space that show up during scrolling and also you can see that every list item (<li>) is blurry during scroll and when I stop scrolling item shows normally.

As far as I was using previous Android 4.x versions there was no such problem. If I disable HW acceleration I have there is no issue anymore, but performance are bad because I used some CSS tricks elsewhere to get better performance in CSS.

Here is some of my code related to the video:

html: (using handlebars)

<div class="content"> <div id='view'> <ul class='table-view'> {{#each []}} <!-- there will be 31 list items --> <li> {{@index}} </li> {{/each}} </ul> </div> </div>

css: li { background-color: grey; border-bottom: 1px solid rgb(243, 255, 226); height: 80px; padding: 0; position: relative; }

/* I tried this to solve the problem, but it did not help */ #view { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; backface-visibility: hidden; }

Anyone with same issue? I think it's a Android 5.0 WebView related issue, but how to solve it?

Thanks

[vignesh-kumar]

Is the issue fixed. I'm also facing this issue.

[stephanebachelier]

@Krysisx for the white space I think it's a GPU issue. I have seen this kind of problem even on iOS. I've noticed your <li> don't have the class table-view-cell, is it normal ? Why the extra div#view is needed ? Have you tried to place the <ul> without the extra div ?

[oliguo]

Same problem if I use iscroll,it also bad performance when scroll listivew