Overflow: hidden with border radius not working on Safari
will-change: transform; on element with overflow: hidden; solved issue for me
So I found a little hack to fix this issue on https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
Just add this line to your element with overflow :
-webkit-mask-image: -webkit-radial-gradient(white, black);
Let me know if someone find another solution :)
.btn{
/* Add this line */
-webkit-mask-image: -webkit-radial-gradient(white, black);
border-radius: 3rem;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: 400;
font-family: arial;
overflow: hidden;
position: relative;
padding: 0.8rem 2.5rem;
text-decoration: none;
}
.btn-primary{
background-color: blue;
border-color: blue;
color: white;
}
.btn-primary::before{
background-color: deeppink;
border-radius: 50%;
content: '';
color: white;
height: 100%;
left: 100%;
margin: 0;
position: absolute;
top: 0;
transform-origin: 100% 50%;
transform: scale3d(1, 1.4, 1);
transition: all 300ms cubic-bezier(0.7,0,0.9,1);
width: 20%;
}
.btn-primary:hover::before{
transform: scale3d(1, 5, 1);
width: 110%;
left: -2%;
z-index: 0;
}
.btn-primary span{
position: relative;
z-index: 1;
}<a href="#" class="btn btn-primary">
<span>Button primary</span>
</a>The accepted answer works, but indeed it removes the box shadow. A comment I saw in this github post says that it can be also fixed by creating a new stacking context (kind of moving an element into a new painting layer). That can be achieved with a small hack like
transform: translateZ(0)In my case both overflow and box-shadow are working with this solution. I hope it helps somebody else too.
UPD: just like Jad Haidar suggested in the comments isolation is a property specifically for working with the stacking context:
isolation: isolate;