Relume
Log in

Community forum for knowledge and support

Updated 10 months ago

Lottie icon not working correctly on safari

At a glance

The community member is experiencing an issue where a Lottie icon is not working correctly on Safari, but looks perfect on all other browsers. A community member suggests changing the rendering option to Canva instead of SVG, which fixes the issue. However, the community member is unsure why this resolved the problem, as they have 5 Lottie icons and the other 3 were working fine. Another community member explains that Canvas rendering provides good performance but supports fewer features than SVG rendering, and outlines specific constraints for Canvas-rendered Lottie animations, such as size, duration, and unsupported features. The community member is advised to review these limitations and the provided resources to understand the differences between SVG and Canvas rendering.

Useful resources
SSara Margolies
·

Why would a lottie icon not work correctly on safari but look perfect on all other browsers? How can I fix this?
https://ek-nutrition.webflow.io/

It's the sneaker icon on the home page and the chair icon on the services page.
Any ideas? Thank you

D
S
5 comments
DDavid Lopez

Good morning. Try changing the rendering option to Canva instead of SVG. I hope this helps.

Resources: https://discourse.webflow.com/t/lottie-animation-bug-on-safari-and-ios-chrome/100918/9

SSara Margolies

Thank you ! That fixed it. Greatly appreciate it.

SSara Margolies

Any idea why?

SSara Margolies

I have 5 lottie icons and the other 3 were totally fine

DDavid Lopez

It might depend on the icons that you are using. Canvas rendering provides good performance but supports less features than SVG rendering. Canvas doesn't render animations as smoothly as SVG. I also saw size and duration constraints that you may want to review.

  • Size and Duration Constraints:
  • Canvas-rendered Lottie animations have specific constraints:
  • Size: The Lottie sticker size must be 2048x2048 pixels or less.
  • Duration: The duration must not exceed 10 seconds.
  • File Size: The Lottie sticker must not exceed 0.5 MB.
  • No 3D Layers: Canvas rendering does not support 3D layers.
  • No Fonts or Media Assets: Avoid using font references or media assets within the Lottie composition.
  • No Text Layers: Canvas rendering does not handle text layers.
  • No Time Remapping: Time remapping is not supported.
  • No Star Shapes or Gradient Strokes: These features are not compatible with Canvas rendering.

I hope this helps. Below are the links to the two articles you may want to review.

Limitations of Lottie Animation in Canva
https://help.lottiefiles.com/hc/en-us/articles/23118704711577-Limitations-of-Lottie-animation-in-Canva

What are the difference between the web HTML SVG and Canvas rendered
https://help.lottiefiles.com/hc/en-us/articles/14942437475481-What-are-the-differences-between-the-web-HTML-SVG-and-Canvas-rendered

Add a reply
Sign up and join the conversation on Slack