Rounded corner of lottie animation are overflowing


I have created lottie animations and put them into a div with rounded corners. It works great in the first project but in the second and third, where the lottie animations hits the rounded corners its overflowing. The div is a flex with overflow hidden. I currently dont know how to solve this problem. I would be super thankful for any advice. It only accurs on mobile devices and also not in webflow preview, only when I view the live site on my phone.

Hi there,

Are you using safari by chance? It’s known to have issues with overflow: hidden and border radius.

1 Like

Hi Rory,

thank you for your quick reply. Unfortunatly I dont use safari. I use the standard IOS Browser App on my phone to preview it. I just double checked if the browser is the issue and downloaded the chrome app to my phone. Sadly the corners are still overflowing:

Mind sharing a read only link to your website so i can check it out?

sure, thank you for your time!

This is the solution for Safari, which might work on other browsers with issues.

1 Like

I will give it a try. I have not yet transfered my hosting from my old site. So im not able to add costum code yet. As soon as I have the hosting plan transfered I will try it. Thank you!

It worked, thank you!