Lottie Animation in Safari Fails

Design help Animations & Interactions
1

HI there,

I am designing a website in Chrome and it is intended to look the following way based on the parameters I set. On the right side is the Lottie File:

Screen Shot 2022-07-23 at 23.55.14
Screen Shot 2022-07-23 at 23.55.141920×1080 79.1 KB

However when I switch to Safari, it looks quite different, it is too big, square and in addition, the corners of the figure are not rounded as they are in Chrome. Also the colorful snakes on the left are way bigger. I tried to switch from SVG to Canvas in Lottie settings and it didn’t help…

Screen Shot 2022-07-23 at 23.52.21
Screen Shot 2022-07-23 at 23.52.211920×1080 78.2 KB

Could you please check what is wrong?

P.s. I tried to set the snakes on the left to canvas in Chrome and they got bigger and stretched the square on the right. It means that Safari sets all Lottie files to Canvas as a default and scales them… But why

Here is my public share link: https://preview.webflow.com/preview/customysocks?utm_medium=preview_link&utm_source=designer&utm_content=customysocks&preview=ac9c5b9eb6a9404a9203271059bbf24e&workflow=preview

2

Hey!

It looks like you’ve hidden the element?

Safari can be a bit funny with girds and % based stuff. Especially if a parent does not have a specific height/width set (such as px, rem or vh/vw).

Have you tried using the canvas rendering for the lottie element?