safari z-index和溢出不起作用

Question

我在safari中遇到z-index块的问题

http://rhino.shahumyanmedia.com/

这个网站在其他浏览器中运行良好，但是前4个圆形块没有正确显示，块中的图像越来越块，尽管我已经给出了溢出：隐藏和z-index到主块和图像

  

注意：我不喜欢将图像作为背景

这是我的风格

.add-border {
border-radius: 300px;
-moz-border-radius: 300px;
-o-border-radius: 300px;
-webkit-border-radius: 300px;
border: 8px solid rgba(20, 172, 225, 0.3);
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
top: 0px;
left: 0px;
overflow: hidden;
}
.service-img img {
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-transition: all 0.5s ease;
z-index: -1;
border-radius: 300px;
-moz-border-radius: 300px;
-o-border-radius: 300px;
-webkit-border-radius: 300px;
}
.service a {
border-radius: 300px;
overflow: hidden;
position: relative;
z-index: 20;
-moz-border-radius: 300px;
-o-border-radius: 300px;
-webkit-border-radius: 300px;
}




   <div class="service-img">
       <a href="http://rhino.shahumyanmedia.com/category/%d1%83%d1%81%d0%bb%d1%83%d0%b3%d0%b8/%d0%bb%d0%b8%d1%86%d0%be/">
   <img src="http://rhino.shahumyanmedia.com/wp-content/uploads/2014/05/face1.png" alt="лицо"/>
      <div class="add-border"></div>

</a>
</div>