search

xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.16k stars 196 forks source link

Flutter Web: Chrome Lottie animation shows white box #255

Open yerkejs opened 1 year ago

yerkejs commented 1 year ago

Hi, I have Lottie animation with grey elements. But on Chrome I see white box. on Safari it works pretty well. I tried already CanvasKit rendered, did not help. I am using 1.4.2 version. Flutter (Channel stable, 3.0.5,

xvrh commented 1 year ago

Hello, can you provide a reproducible example?

tauqeerkhattak commented 1 year ago

I am using version 2.1.0 and the problem still exists, on chrome, the whole screen turns white. However, it works fine on Microsoft Edge.

Minimal reproducible example: https://github.com/tauqeerkhattak/lottie_example/blob/6eb30868b43d4cabca172923273c197e94b95303/lib/main.dart

xvrh commented 1 year ago

@tauqeerkhattak I tried your example with Flutter 3.3.10 but I don't see any problem. Is there any error in the Chrome Devtools console?

tauqeerkhattak commented 1 year ago

Running the same code, I get the following screen:

https://user-images.githubusercontent.com/47942659/212043883-956a5bf4-ec44-4bc7-b59f-f7d5b2a6eba7.png

xvrh commented 1 year ago

@tauqeerkhattak can you clarify what is wrong with this screenshot?

tauqeerkhattak commented 1 year ago

I am giving the backgroundColor property of Scaffold to black, but after using Lottie.asset(), it turns the whole background to white as seen in the screenshot.