Relume Community Icon
Relume Community
  • 🏠Home
  • 📅Events

  • 🔵Announcements
  • 🔵General
  • 🔵Getting Started
  • 🔵Issues
  • 🔵Showcase

Powered by Tightknit
Issues
Issues

Lottie Icons Not Displaying Correctly on Safari: Troubleshooting Tips

Avatar of Sara M.Sara M.
·

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

5 comments

  • Avatar of David L.
    David L.
    ·

    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

  • Avatar of Sara M.
    Sara M.
    ·

    Thank you David L.! That fixed it. Greatly appreciate it.

  • Avatar of Sara M.
    Sara M.
    ·

    Any idea why?

  • Avatar of Sara M.
    Sara M.
    ·

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

  • Avatar of David L.
    David L.
    ·

    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