Sluggish render when scrolling fast in webview

programming web dev
1

I’m encountering some scroll issues when I scroll fast in a cordova app that I’m working on. I get parts of the screen that don’t paint as fast as I’m scrolling, so they look like white blocks on the screen for about 1s before they fill in. This post is not by me but it illlustrates the same problem I’m having.

When measuring interactions the dev tools performance tab, I get really long tasks that show “Compositing layers” and “update layer tree”. There are a lot of stack overflow questions about fixing these long-running tasks, and so far none of the suggestions I’ve seen have helped, including promoting elements to a separate gpu layer and forcing a rerender of the affected elements using various techniques.

  • The closest I’ve come to fixing the problem involves using an infinite animation on the opacity of the affected nodes, in combination with the new content-visibility property. Something like this:
.affectedNode {
  animation: redraw 10s linear infinite;
  content-visibility: auto;
}

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

This goes a long way, but from time to time I still see the problem. So I have a feeling that what I’ve done so far simply works around the problem rather than fixing it, so I’d like to get some ideas for how to go about this problem. Thank you!

2

Unfortunately, there really isn’t much that can be done outside of what you are already trying. This is caused by the browser trying to paint or repaint a region but is prevented from doing so for a variety of reasons outside your control.

How large is the content you are loading? Does it contain a lot of images?

3

Thanks for the response. I get it even in a relatively short scrollable list with ~11 images and some text. Yeah in general the problem happens when there are images to show. I created a minimal reproduction of the bug and it’s available at this repo, with an APK that can be downloaded here.