Flutter Web: Lottie Animation is cropped on Android Chrome, but Windows Chrome is okay-CodePudding

Im using a lottie animation with Flutter compiled and deployed as a web application. It works well on desktop chrome, but not on android chrome. Does anybody know the problem?

(Flutter (Channel stable, 3.3.1, on Microsoft Windows [Version 10.0.22000.856], locale de-DE)) Android Chrome 105.0.5195.79, both should be up to date.

main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Lottie.asset("assets/lottie/94729-not-found.json"))));
  }
}

On Chrome Windows/Desktop all okay...

On Chrome Android (also Android Emulator) - somehow cropped

Update: Actually, I observe the problem with all lottie animations.... Is that a lottie bug?

Thanks!

CodePudding user response：

I think, I found a solution/workaround from the lottie pub page:

compile the app using the canvaskit:

flutter build web --web-renderer canvaskit

flutter run web --web-renderer canvaskit

maybe it helps in case you encounter the same problem

CodePudding user response：

I had the exact same symptoms but on desktop browser (Firefox): some layers of the image seemed to be missing, in addition to poor animation performance.

In my particular case, I didn't have to change the default --web-renderer option. My issue was that I neglected to copy the latest index.html regenerated during each builds to my web server every time.

I did that in order to preserve the <base href> HTML tag that I had modified manually in that file (which by the way can also set via a build option: flutter build web --base-href {path} but not to a relative path for some reason).

That was a mistake, because index.html contains a unique service worker version ID that changes at every compiling and that is apparently required to operate the animation properly. Peeking into the browser console helped reveal the issue.

EDIT: after trying the web app in a mobile browser (DuckDuckGo), I can attest to ALSO requiring using the --web-renderer canvaskit build option to have the animation run smoothly on mobile, aka without losing layers & framerate. Maybe the outcome would be different in Chrome-based mobile browser, but at this time it seems that option is a necessity in spite of the heavier package size.