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!