Overflow: hidden with border radius not working on Safari

Question

I have to make a button with a ::before hidden which shows on :hover. This animation is working great on Chrome, IE and Firefox, but i have a weird issue on Safari.

Overflow:hidden is working but without the border radius.

You should run the fiddle in safari to see this issue.

Thanks !

.btn{    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>

Answer 1

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.