search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.84k stars 2.85k forks source link

Distorted Gaussian Blur Circle on Iphones #2662

Open Jarbeen opened 2 years ago

Jarbeen commented 2 years ago

Hello there,

My animation consists of a moving purple circle. I applied the Gaussian Blur Effect on it. On desktop computers and Android phones it looks fine. But on iPhones it looks distorted. You can see it here: https://sexemy.org/bug-demonstration

How it should look like (it looks like this on computers and Android phones): How it should look

How it looks like on iPhones: How it looks on Iphones

iPhone browser and version: It looks buggy in Safari and in Chrome on both an iPhone released last year and one released 5 years ago.

After Effects version: 18.4.1 Bodymovin version: 5.7.4 (I use the software on a Macbook Air released last year.)

Download link to After Effects file: https://drive.google.com/drive/folders/19ZcnD1AhDruHI3v023EtlkzFR4C3B0-r?usp=sharing

I would be so glad if someone could help me. Thank you!

bodymovin commented 2 years ago

hi, can you try using a newer version of lottie? version 5.5.3 is pretty old.

Jarbeen commented 2 years ago

Thank you! I have updated Bodymovin and the Lottie player on the latest version 5.7.14 – unfortunately the bug is still there.

bodymovin commented 2 years ago

can you try changing the values on the filterSize? It might be related to dpis on the device. https://github.com/airbnb/lottie-web/wiki/Renderer-Settings#filtersize-svg-renderer