lottie animation gets clipped on web (Android chrome and iOS Safari)

[HosseinYousefi]

How it looks like in web:

How it should look like:

Any ideas on why this is happening?

[xvrh]

Can you share the json file so I can have look?

[HosseinYousefi]

@xvrh sure, here's the one from the picture: identi.json.zip

[lemomar]

Run this when building your project: flutter build web --web-renderer canvaskit You need to specify what renderer to use. It seems that the html renderer, which is used for mobile by default, cannot handle Lottie files for now.

[hyiso]

Same problem。 Using canvaskit will leading to Noto font related problems. And also some device like iPad4 does not support WebAssembly, causing canvaskit renderer not working

[ahetawal-p]

I am seeing this too, basically Flutter Mobile Web is not able to render lottie files, Flutter web works fine.