Extreme jank on iOS/Android the first time any kind of animation or transition runs (release build) - skia shader compilation

[acoutts]

Steps to Reproduce

1. Install and run your app on a recent iOS device using a release build.

Expected results:
Flutter apps should be just as buttery as native apps, especially on the first run when it's the customer's first time opening the app getting their first impression of it.

Actual results:
The very first start after installing is extremely janky and laggy. The next time you start it, it will be sort of fine. After a few more starts it will be smooth.

• Yes this is a release build of the app.

Here are some gifs for examples on an iPhone 8 running iOS 13.5.1.

Very first time starting the app after a fresh install

• Notice most of the frames after the splash screen and before the screen slides up are dropped. This has the most jank (first run).
• You can really see the jank when the loader animation stops (when that screen is disposed) and the next screen starts to slide up, but it just kind of appears with no frames in between.
  

Second time opening the app

• The second time opening the app you can see the initial transition is better but there is still some very noticeable jank as the screen slides up from the bottom.
  

Third time opening the app

• Now the third time and every time going forward it is smooth just like you'd expect.
• But if you uninstall or update the app, then it will be janky again until the 2nd or 3rd time you open/use
  
  it.

Screen transitions example

The same thing happens for screen transitions too.

• The first time you run a new screen transition it will be laggy.
• All future screen transitions of the same type are smooth.
• If you use a different kind of transition somewhere in your app, that one will be laggy too the first time it runs.
  

I have already tried following this doc related to SkSL caching: https://github.com/flutter/flutter/wiki/Reduce-shader-compilation-jank-using-SkSL-warm-up
It fixed some of the first start jank issues on Android but has no effect on iOS (likely because of metal which is mentioned there). It also kind of is a bummer that if I want my app to be buttery smooth, I will always need to write integration tests (or do it manually) and save a dump of every transition / animation, and ensure to keep that skia shader capture file updated every time I change my app.

To be completely honest, this is not acceptable to ship the app in its current state and I am disappointed I got this far with Flutter (7+ months) before I noticed or even heard of this kind of issue. It seems to not be Flutter's fault but Skia's, but still I think new devs should know this problem exists before they get neck deep into it. It's the kind of thing you won't notice until you have a somewhat significantly-sized app and can easily overlook at first.

I really hope this can be fixed soon because it has an extremely detrimental effect on the perceived quality of your app when it's this laggy the very first time you open it, especially on brand new ios devices where native apps don't lag at all.

Related issues

#53607
#60365
#60315

Logs

[✓] Flutter (Channel dev, 1.20.0-7.1.pre, on Mac OS X 10.15.5 19F101, locale en-US)
    • Flutter version 1.20.0-7.1.pre at /Users/andrewcoutts/Projects/flutter
    • Framework revision 7736f3bc90 (4 days ago), 2020-07-10 16:33:05 -0700
    • Engine revision d48085141c
    • Dart version 2.9.0 (build 2.9.0-21.2.beta)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/andrewcoutts/Library/Android/sdk
    • Platform android-30, build-tools 29.0.3
    • ANDROID_HOME = /Users/andrewcoutts/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.46.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.1

[✓] Connected device (6 available)
    • Android SDK built for x86 64 (mobile) • emulator-5554                            • android-x64    • Android 10 (API 29) (emulator)
    • xFF0C 8 (mobile)                      • d7cab5675167dcdab847995b631648e5c309e1d3 • ios            • iOS 13.5.1
    • iPhone 11 Pro Max (mobile)            • 47044AC1-723C-4435-B3F7-D820DB72A023     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)
    • macOS (desktop)                       • macos                                    • darwin-x64     • Mac OS X 10.15.5 19F101
    • Web Server (web)                      • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                          • chrome                                   • web-javascript • Google Chrome 83.0.4103.116

• No issues found!

[acoutts]

cc @liyuqian

[acoutts]

Some additional findings:

• When I slow the global animation speed down by 50x (timeDilation = 50), I can see it's only the very first frame of the animation that is dropped.
• After that initial jank, it is smooth for the rest of the (very slowed down) animation.

[acoutts]

Looking closer at the slowed down animations (this time timeDilation = 25), I think it is worse than I thought in the last comment because you can see it skip more than a few times.

First app open

It seems to skip more than once here.

First screen transition

This one is not as bad, I just see two skips.

[bierbaumtim]

Experiencing same issues on both stable and beta versions, but never thought that this is an issue of flutter or Skia.
Thanks @acoutts for your research.

[Ufuk94]

I hope this gets fixed as soon as possible. This issue completely ruins the first impression of an app.

[bluemix]

I am hoping this issue is fixed before my initial release on iOS

[liyuqian]

We're actively working on "Test-based shader warmup #53609" to solve this, but that may take some time.

Before that, you can follow #61045 (comment) to compile a custom Flutter engine that turns off Metal and uses OpenGL so the SkSL warm-up would solve this issue. Flutter still used OpenGL on all iOS devices a few months ago so its performance would not be too far behind. Depending on the workload, your app may prefer trading Metal's other improvements for OpenGL's vastly faster shader warm-up performance.

Admittedly, compiling the Flutter engine takes much more time than just clicking a button, turn on a flag, or running a single command. We could have made it much easier by providing an opt-out-Metal option (#61045). However, we don't know if that will bring more harm than good. That's why your feedback is valuable to us, and we'd love to hear feedback from as many app developers as possible.

[trighomautumnatg]

Our customers have complained after opening the application for the first time :(