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.

@juanerazo it actually looks like this is a Safari bug so we’ll need to utilize a little custom code to fix the issue. Very cool hover effect btw! I enjoyed that :smile:

Here’s the resource for the workaround: https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b

So you’ll need to add this to your custom code head area of your page to account for that overflow-hidden border radius issue in Safari:

<style>
.button-div { -webkit-mask-image: -webkit-radial-gradient(white, black); }
</style> 

I hope that is helpful! :bowing_man: I tested on my end via inspector and it was working:

3 Likes

Hey thanks @Waldo for your help. Glad you like the hover effect. :slight_smile:

So, I added the code to the head and published it in webflow and it worked. However, I am having to export the code and upload to a different server, as the client requires this. So I did that and I am testing again. Unfortunately the buttons are still showing no round corners in safari after publishing the exported code. You will see in the code that I added the snippet you shared.

Any further insight on this? Thanks for taking the time!

Webflow link: http://cfeaster.webflow.io
Exported code link: http://cfmiami.org/easter/

Ok, nm. It’s working now. I made sure my uploads were reflecting the new code. Thanks so much for your help @Waldo

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.