Google Material样式 - 按钮无法在Safari中使用

Question

我正在为我的新网站制作一个素材样式按钮。

除了Safari之外，它似乎适用于所有浏览器......

您可以在此处查看：http://codepen.io/anon/pen/jyVBpL

<div class="buttona">View our work</div>

CSS

body{
 margin:0;
 padding:0;
}
.wrapper {
    display: block;
  width:99.6%;
  margin:0.2%;
}

.wrapper:after {
    content:"";
    display:table;
    clear:both;
}

.buttona {
    width:auto;
    height:65px;
    padding:0px 25px 0px 25px;
    display:inline-block;
    background-color:#ff5252;
    color:#ffffff;
    letter-spacing:1px;

    font-size:19px;
    line-height:65px;

    background-image: none;
    background-repeat:no-repeat;
    background-position: right 18px center;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius:2px;
    border-radius: 2px;

  position:relative;
    overflow:hidden;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index:0;
}


.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  -webkit-transform:scale(0);
     -moz-transform:scale(0);
       -o-transform:scale(0);
          transform:scale(0);
}

.animate {
    -webkit-animation:ripple 0.65s linear;
   -moz-animation:ripple 0.65s linear;
    -ms-animation:ripple 0.65s linear;
     -o-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@-moz-keyframes ripple {
    100% {opacity: 0; -moz-transform: scale(2.5);}
}
@-o-keyframes ripple {
    100% {opacity: 0; -o-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}

Jquery的

/*jQuery*/

$(function(){
    var ink, d, x, y;
    $(".buttona").click(function(e){
    if($(this).find(".ink").length === 0){
        $(this).prepend("<span class='ink'></span>");
    }

    ink = $(this).find(".ink");
    ink.removeClass("animate");

    if(!ink.height() && !ink.width()){
        d = Math.max($(this).outerWidth(), $(this).outerHeight());
        ink.css({height: d, width: d});
    }

    x = e.pageX - $(this).offset().left - ink.width()/2;
    y = e.pageY - $(this).offset().top - ink.height()/2;

    ink.css({top: y+'px', left: x+'px'}).addClass("animate");
});
});

有任何问题请告诉我

提前谢谢。