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.
Look at the white spaces 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 id='view'>
<ul>
{{#each []}}
<li>
{{@index}}
</li>
{{/each}}
</ul>
</div>
css:
ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 15px;
list-style: none;
background-color: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
li {
background-color: grey;
border-bottom: 1px solid rgb(243, 255, 226);
height: 80px;
padding: 0;
position: relative;
}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#view {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
I'm also using ratchet to get some basic CSS.
Anyone with same issue? Do you think it's a cordova or Android Lollipop WebView bug?
Any chance to solve it?
Thanks
