Rounded corner of lottie animation are overflowing

[siebersebastian (Sebastian Sieber)]

Hello,

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.

---

[RoryVB (Perspective Design)]

Hi there,

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

Overflow hidden + round corners not working on Safari

Hi, @stefania4! This Safari bug is well known (don’t know why they didn’t fix it). Workaround you can find here: Safari not hiding overflow on rounded corner divs

[siebersebastian (Sebastian Sieber)]

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:

[RoryVB (Perspective Design)]

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

Share a read-only link | Webflow University

[siebersebastian (Sebastian Sieber)]

sure, thank you for your time!

https://preview.webflow.com/preview/sebastians-stupendous-site-fade1f?utm_medium=preview_link&utm_source=designer&utm_content=sebastians-stupendous-site-fade1f&preview=17062096c0284cedb93c72aa20805179&workflow=preview

[Port_of_Folio]

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

Safari not hiding overflow on rounded corner divs

Any one know why Safari is not hiding overflow on divs with round corners? How can I fix this? See pill buttons I created with a gradient hover interaction. The only way to achieve the interaction was by using a div and placing an image in the div, then set overflow hide. The div will hide overflow when only using a bg color, but not when placing an image inside. It works on other major browsers.

[siebersebastian (Sebastian Sieber)]

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!

[siebersebastian (Sebastian Sieber)]

It worked, thank you!