Flutter iOS animations are janky on first run Flutter iOS animations are janky on first run ios ios

Flutter iOS animations are janky on first run


Before anything: make sure the jank you are seeing is truly related to this issue. If your application was already janky on the OpenGL backend in iOS, or is janky on Android (where shader caching is implemented), you likely have some other performance related problem. Try working through performance profiling in Flutter - i.e. record some timelines and analyze what's going on in frame workloads.

EDIT 2/23/2021

Metal binary archive work turned out to be a dead end. See https://github.com/flutter/engine/pull/23914 for more details. This is still a high priority item for the Flutter team, but the timeline for a fix is unknown right now.

end edit

Otherwise:

  • See if you can use simpler shaders. For example, avoid alpha blending, avoid gradient calculations, avoid expensive clips, etc.
  • Downgrade to Flutter 1.12.
    • This may require cherry picking in other fixes you need.
    • This may require downgrading certain packages, or backporting ones that are not available for 1.12.
  • Use a custom built engine with OpenGL.
    • See instructions here.
    • This will almost definitely introduce regressions for some applications and/or devices. These may or may not be acceptable for you. OpenGL on iOS is no longer supported by the Flutter team, and requests for bug fixes on it will be closed as won't fix.
  • Wait for Metal binary archives to be implemented. Once that happens, Shader Warmup will be supported on Metal/iOS. The Flutter and Skia teams are actively working on this (basic support for it is already in place but not quite ready for general use). We're targetting availability in early 2021.

A little background:

Shaders are small programs that Skia creates from various drawing commands to create a program that the GPU can execute to actually draw pixels on the screen. Compiling them can take non-trivial amounts of time, and different scenes may require different shader programs. Flutter's architecture is designed to cache and reuse compiled shader programs so that they can be reused once they are compiled. Support for this exists in the OpenGL based backend in Skia, but is still being worked on for the Metal based backend (see https://skbug.com/10804).

There were a lot of good reasons to migrate to Metal.

  • Apple is deprecating OpenGL
  • Memory and frame rate related issues were observed in the OpenGL backend that were rapidly becoming dead ends. Apple's profiling and debugging tooling is all geared towards Metal now due to deprecation. Many issues were observed to be completely resolved by shifting to Metal.
  • Core support for Metal was believed to be achieved. This included basic rendering, cross context images, and platform view support. This did not include support for shader caching, unfortunately.

We did briefly consider supporting both OpenGL and Metal, but decided not to. There are limited resources to address bugs in that layer of the stack, we were already aware of a number of perofrmance related issues that Metal solved.