airbnb / lottie-android

Render After Effects animations natively on Android and iOS, Web, and React Native
http://airbnb.io/lottie/
Apache License 2.0
35.02k stars 5.42k forks source link

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

Closed Arepeel closed 2 years ago

Arepeel commented 2 years ago

Checklist

  1. My animation doesn't use any unsupported features.
  2. I know what part of my animation doesn't work.
  3. I have created a simplified version of my animation
  4. I have attached the AEP file (as a zip file so it can be attached) that only has the part of the animation that doesn't work.

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 ezgif com-gif-maker (1)

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

Arepeel commented 2 years ago

Moved to lottie flutter repo instead. My mistake

https://github.com/xvrh/lottie-flutter/issues/238