Investigate possible Flutter engine cause of jitter

[matthew-carroll]

We think that the cause of panning jitter might be due to behaviors within the Flutter engine. This ticket is to investigate possible causes and explore solutions.

The jitter seems to be more noticeable on higher refresh displays, such as the 90Hz Xiaomi Redmi tablet.

To recreate the jitter in a reproducible manner, use the floating action buttons at the lower right of the screen to animate panning up/down and left/right. You should see fairly frequent jitter, which looks a bit like rapid starting and stopping while panning.

[RossComputerGuy]

Which particular example Dart file should I run to investigate this?

[matthew-carroll]

There are multiples. But you can start with main_page_list_images_inspector

[RossComputerGuy]

Alright, I tried main_list and noticed it's not affected but main_minimal_viewport is.

[RossComputerGuy]

I did some testing and this looks to be related to shaders. Following Flutter's documentation on shader compilation jank seems to have mitigated the problem mostly. I am not sure if that is exactly the issue but it's a lead. But even with using a precompiled shader, I notice in the Flutter DevTools that there's still some jank rendering.

[matthew-carroll]

The jitter problem isn't visible in the profiler, in my experience. That occasional jank frame isn't good, but that's a different problem.

If you watch the UI as the panning animation runs, you'll see numerous jitter frames. And yet you won't see a bunch of back to back jank frames in the profiler. That's part of why this problem is difficult. Flutter doesn't seem to recognize that something isn't right.

[RossComputerGuy]

Interesting, so even with precompiled shaders it's jittery? I'll look more into it tomorrow by enabling the Skia tracing. Have you tried with running with Impeller? If not, I'll try tomorrow since I saw there seems to be others with this issue on Android and Impeller seems to be unaffected.

[matthew-carroll]

I haven't tried this experience with Impeller. We tried our direct PDF renderer with Impeller and it was way worse than Skia. The Android version of Impeller is still considered unstable and experimental. But you're welcome to give it a try.

You'll wanna keep a close eye on the screen as it pans. You might also want to download the Xodo app, which is a PDF renderer. You can pan around in there and feel the difference.

[RossComputerGuy]

Alright will do, I also came across this page which references a method called saveLayer. Might be worth looking into using that.

[matthew-carroll]

In the bitmap PDF renderer we're pushing texture layers, so there's nothing for us to save. That experience has the same jitter as this image based tiling experience.

[RossComputerGuy]

It appears the jitter is gone or reduced significantly under Impeller.

Edit: looks like there's just a slight bit of jank under Impeller as well but I did notice GC is running every time it scrolls to the next page so that might be worth looking into.

[matthew-carroll]

Is there a path forward where you could discover the relevant differences between Skia and Impeller, which lead to the elimination of the jitter? At least to the extent that we might point the Flutter team in that direction?

Eventually Impeller will be the norm, and we'll work under the expectation of using Impeller, but that time hasn't arrived yet for Android. So we're interested in a path that would result in fixes to Flutter's integration with Skia such that this problem goes away.

Do you think there's a path forward for you to help with that?

[RossComputerGuy]

The biggest change I've read for Impeller is that it compiles shaders before execution. I think if GC could not be executed during scrolling then it could lead to better performance.

[matthew-carroll]

Those sound like two very different problems. Is the problem repeated shader compilation? Or is the problem repeated GCs?