Scrolling issue on android 5 Lollipop

[Jack14]

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.

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)

<ul> {{#each []}} <li> {{@index}} </li> {{/each}} </ul>

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

Anyone with same issue? Do you think it's a cordova or Android Lollipop WebView bug?

Any chance to solve it?

Thanks

[Kerri Shotts]

It's not a Cordova issue -- it just uses the system webview. I would expect you'd see the same behavior on any app that did so.

But that behavior is really janky. (It's hard to tell what is and isn't blurry though; the vid is too low resolution for me) If I had Lollipop, I'd try on some of my apps on my tablet, but Samsung & Verizon are being slow to deliver. (And emulators don't tell anywhere near the whole story here.)

Is this the minimum CSS that replicates the issue? I'd check that first (that is, if you create a blank page with just a lot of LIs with this CSS, does it have the same issue). 

Also -- how many items are in the list?

[Jack14]

ok thanks,
I forgot to add this css code:

#view {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
     perspective: 1000;
     backface-visibility: hidden;

     -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
}

the <ul> is inside a <div id='view'></div>

Btw, you can see in the vid that the main problem is the white space that is created up or down while scrolling.
Yes that's the minimum CSS that replicates the issue, there are 31 items in that list.

Thanks

[Michael Klemarewski]

I've been seeing some similar behavior on some websites inside web views on 5.0 phones. I tried testing out your minimal test case. It's really hard to see on my Nexus 5 running 5.1, but there is some rendering jank while scrolling with hardware acceleration.

I tried it using an emulator running 5.0, and the rendering issue is really prominent there. If I disable hardware acceleration, the render jank completely disappears.
Another thing to note is that I removed all of the css rules, accept the height on the <li> elements, and I still see the rendering issue, so I'm less convinced that it's a css issue.

[Kerri Shotts]

Hmmm. That does not sound good. Though I shouldn't be surprised -- Google's skewered web views with respect to hardware acceleration before. Sigh.

Out of curiosity, have you tried to see if the same behavior is present when using project crosswalk or AppGyver's steroids? They don't rely on the system browser, so it's entirely possible they'll work without having to resort to removing hardware acceleration.

[Kerri Shotts]

So Samsung /finally/ released Lollipop for my tablet, and I'm now able to see your issues firsthand. And boy, are they ugly.

It looks like this boils down to the default webview using low resolution tiling while scrolling (or doing other animations, like panning). It renders the screen at very low resolution, and can use that as a texture when doing scrolls so that the scroll doesn't feel janky. This comes at the expense of a tremendous amount of visual issues when the high-resolution tiles are rendered in.

There's no fix for this in the default webview that I've found. It affects /all/ apps that use the webview (for example, I noticed it today while using Feedly, and that tickled my memory). It will certainly affect PG apps too, but it's not an issue with PG as much as it is a decision by Google to keep frame rates high while scrolling at the expense of the visual artifacts that come later when the tiles get rendered at high resolution. 

Since all of this is coming from Chromium, it should generate the same effect. BUT at least with Chromium (Project Crosswalk, etc) you should be able to control this by adding a flag to turn off this feature: --disable-low-res-tiling (https://code.google.com/p/chromium/codesearch#chromium/src/content/public/common/content_switches.cc&q=kDisableLowResTiling&sq=package:chromium&type=cs&l=142). This will almost certainly be at the expense of high fps, but I would rather clean rendering and lower fps than the fuzzy artifacts I see now.

I haven't tried it yet -- I'm going to experiment with it over the next few days to see if it works or not. But I thought I'd report my findings thus far.

Sigh, Google. How is it possible that an old iPad 3 can out-render a new Samsung Galaxy Tab S 8.4 when handling web content? Sigh...