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 
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! 
I tested on my end via inspector and it was working:
Hey thanks @Waldo for your help. Glad you like the hover effect. 
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
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
