title: Overflow: hidden with border radius not working on Safari
body: <p>I have to make a button with a <code>::before</code> hidden which shows on <code>:hover</code>. This animation is working great on Chrome, IE and Firefox, but i have a weird issue on <strong>Safari.</strong></p>
  
  <p>Overflow:hidden is working but without the border radius.</p>
  
  <p>You should run the fiddle in safari to see this issue.</p>
  
  <p>Thanks !</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="btn btn-primary"&gt;
    &lt;span&gt;Button primary&lt;/span&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>