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
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
Any idea why?
I have 5 lottie icons and the other 3 were totally fine
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