[Flutter Web] [lottie 1.4.3] Black box on lottie animation on IOS safari

[Arepeel]

Describe the bug Using flutter lottie package 1.4.3. The animation shows black box on IOS safari browser for flutter web.

1. This issue persist using lottie.file and lottie.network.
2. This issue does not happen if i use lottie_player 0.0.5 package.
3. This issue does not happen on desktop chrome.

What version of Lottie did you test this on? lottie 1.4.3

What version of Android did you test this on? IOS 15.5 IPhone 12 Pro

Steps To Reproduce

1. Import lottie and lottie_player package (https://pub.dev/packages/lottie) (https://pub.dev/packages/lottie_player)
2. Run the code sample using IOS devices using safari browser
3. See error

Reproducable code sample

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:lottie_player/lottie_player.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Lottie Issue'
      home: LottieSample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        children: [
          const LottiePlayer(
            networkUrl:
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
            width: 200,
            height: 200,
          ),
          Lottie.network(
            'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
            width: 200,
            height: 200,
          ),
        ],
      ),
    );
  }
}

Flutter Doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.5.0-2.0.pre.15, on macOS 12.5 21G72 darwin-x64, locale en-MY)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.72.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!

Gif Animation

As you can see, the issue happen only on lottie package, lottie_player package(above) renders correctly.

[xvrh]

@Arepeel can you try with forcing the canvaskit (skia) renderer https://docs.flutter.dev/development/platform-integration/web/renderers

flutter build web --web-renderer canvaskit

There are 2 renderers: canvaskit & html. By default Flutter will use the html renderer on mobile browser. But html renderer has some missing features which make it unsuitable for Lottie.

[Arepeel]

@xvrh Hi, tested with canvas kit renderer and working as expected. Thank you very much!

For people who want are having the same problem, can also include

window.flutterWebRenderer = "canvaskit";

insideindex.html inside before your main.dart.js https://docs.flutter.dev/development/platform-integration/web/renderers#runtime-configuration