Jittery performance on first run of animation/transitions due to shader compilations

[sethladd]

On some apps, the first time you run a "big" animation (like a hero transition), there appears to be some jitter/jank. After the animation is warmed up, it appears to become smoother.

This is a tracking issue to investigate and solve.

[eseidelGoogle]

Now that --release builds exist and use AOT mode, there should no longer be initial compile jitter? If you have specific traces happy to look at them!

[sethladd]

Reopening as this is a systemic issue. Report from our mailing list: "2) First time loading shows lag, but after some time experience becomes smoother." and "Initially home screen lags for the first time only, then it gets smoother" and we recently saw it with a customer's app and their initial onboarding screens (on a Pixel, a modern phone).

[Hixie]

This is a metabug for tracking these similar issues.

Fixing this is our top performance priority.

Assigning to @cbracken who is currently tasked with investigating this.

[flippingbitss]

Any updates on this ?

[mmm111mmm]

I'm on 0.2.8 of the flutter.io Gallery app on the Play Store with a Nexus 4. I'm looking at the Shrine app, the hero transition particularly.

The performance degradation between first run and subsequent runs seems almost completely gone compared to previous versions.

There still seems to be a very, very slight difference between first and subsequent runs but it's very, very, slight to the point where I'm not even sure if it's there after looking at it numerous times.

It's still very choppy on my Nexus 7. But I think that is related to #11861 Or perhaps tablet specific as I'm not sure Google are testing Flutter on tablets.

[christian-muertz]

Any update on this?

We want to launch our app soon... This performance issue is critically for us :/

[liyuqian]

I haven't uploaded a solution yet. But I've added some tracing as mentioned in #28113 (comment) . It would be nice if you can trace your performance issues with master channel and see if the font loading is the cause.

[miguelpruivo]

@kf6gpe I’m sitting at 1.5.3 @ dev. When was it synced with master? Anyhow, I’m looking to release an app with this issue (if not fixed until then) early next month.

Fingers crossed for a solution on this. It always look like the app is doing some heavy task in those little seconds.

[liyuqian]

@miguelcmedeiros : v1.5.3 should have the added trace events. Can you please follow #813 (comment) (especially item 5) to capture a trace of your issue so we can figure out how to help you?

[yunyu]

@liyuqian I'm not sure if this is the correct place to post this, but here is a ~200 LoC single file example which exhibits the issue (as well as #28113 and #31086) on iOS, but works fine on Android (with android.permission.INTERNET): https://github.com/yunyu/flutter_scroll_stutter_test/blob/master/lib/main.dart

It consists of a feed containing images with a text overlay and a basic parallax effect.

[miguelpruivo]

Noticed that this also happens when the iPhone is in low power mode. It completely jitters scroll and animations.

[liyuqian]

@yunyu : Thank you very much for your example app! I did reproduced the stutter on an iPhone X, and it didn't stutter on an iPhone 6S. I checked the trace and it's not related to the shader compilations of this issue so I'll route the discussion to #31086 (comment)

[liyuqian]

I'm closing this bug since all new complaints here seem to be unrelated with our original issue. I created a new issue #31881 for our original task of improving flutter_gallery's shader compilation jank. Other iOS related first animation jank issues should be routed to either #28113 or #31086. If both of them don't seem to be the issue that you had, please feel free to create a new issue.

[shinayser]

I am experiencing this problem on a current production app (flutter v1.5.4). The first time my animations run janky (after an install), then it runs smooth.
Both Android and iOS.

[michinchin]

Experiencing this specifically with hero animations. Other animations seem to run smooth. However, initial hero animation is a bit janky

[arsen]

Same for me, initial run of a hero animation is missing frames.

[miguelpruivo]

It seems to happen with all animations/scroll at start of an iOS app and/or reloading from background. It’s 2/3 seconds janky and then smooth until closed and reopen again. You can replicate it everytime in an iPhone X (at least).

[michinchin]

Anyone find a fix? Or a workaround for this?

[michinchin]

Found it lags for the first time on both Android and iOS initial start up

[liyuqian]

We're coming up with a long-term solution for this and that progress is tracked publicly on #32170 . Currently, we have a 16-page internal draft design doc with 9 different proposed solutions in it.

In shorter terms, we believe that there might be some specific issues that we can quickly solve just for iPhone X since the issue seems to be less bad on older iPhones. We're currently purchasing iPhone X to add to our device lab so we can debug the performance of iPhone X: #34590

[michinchin]

#32170

This is not only an issue on the iPhone X. We have done testing on the Pixel 3 and other android devices and have found the same effect.

[liyuqian]

@michinchin : we're aware of that hence #32170 is not just for iOS, but also for Android, Fuchsia, Desktop, and probably all platforms that Flutter directly compiles into binaries.

iOS currently just has additional issues. For example, we can store binary persistent shader cache on Android, but we can only store GLSL persistent shader cache on iOS. That requires iOS to do one more compilation (compared to Android). For that, we're also enabling Metal backend for iOS which should help this specific issue.

[miguelpruivo]

@liyuqian thank you for the updates. Currently (and because I’m an iPhone X user) I immediately noticed it and I must say that despite of being an issue already tracked, it bothers me somehow to have a production app that launches on a scroll screen where it always feel janky as the user starts it on iPhone for the first 2 seconds.

Oddly and in my experience, it seems to affect only the iOS. Android devices were I’ve tested it, seem to be good and smooth right from the launch point.

[liyuqian]

@miguelcmedeiros : that's exactly the difference between binary persistent shader cache and GLSL persistent shader cache. On Android, there's 0 work if you close the app and re-open the app. On iOS, re-opening the app triggers another GLSL to binary compilation.

[miguelpruivo]

@liyuqian got it. Do you have an idea of when a fix may be available? Have you already found a solution for it or still drafting for?

PS: You've tagged the wrong person. 😄

[liyuqian]

Oops. We haven't picked which solution to pursue. Will update #32170 with some proper time estimation once we made the decision.

[erf]

@liyuqian Any news on this?

I'm experiencing jaggy animations every first time i do:

Navigator.push(MaterialPageRoute(fullscreenDialog: true, builder: (context) => SomePage()));

Second time i open a page, it' much smoother.

I'm on an iPhone 7.

flutter --version
Flutter 1.15.18 • channel dev • https://github.com/flutter/flutter.git
Framework • revision 9437639590 (31 hours ago) • 2020-03-06 10:24:23 -0800
Engine • revision 5aff311948
Tools • Dart 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)

[liyuqian]

@erf : we're actively working on SkSL shader warm-up. Some preliminary results on iOS should be available in 1-2 months.

[liyuqian]

For progress, please check #32170 . We'll be referencing it when we're making smaller fixes.

[erf]

@liyuqian i feel the performance has been improved in the latest dev version 1.16.3 ..?

[liyuqian]

@erf : it's nice to hear that! We're always working hard to improve the performance. While #32170 isn't fixed yet, we've made at least 13 other quantified improvements between Sep 2019 and Dec 2019.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.