css mac-webkit浏览器(safari/chrome)溢出隐藏边界半径错误

Question

我在Mac上渲染chrome或safari浏览器时遇到问题。布局如下：

<a href="pdf/bus.pdf" class="circle_wrapper">
    <span class="business"></span>
    <span class="title">BUSINESS SOLUTIONS</span>
    <span class="small_title">SEE OUR BROCHURE </span>
    <div class="circle_filler"></div>
    <img src="images/image_logo.png" alt="">
</a>

和CSS

.circle_wrapper {margin-right: 40px; float: left; width: 286px; height: 286px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background-color: transparent; position: relative; top:0; left:0; overflow:hidden; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-decoration: none;}
.circle_wrapper.last {margin-right:0px;}
.circle_wrapper img {position:absolute; z-index:-2; border:0;}
.circle_filler {width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; left:-380px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;}
.title {color: #ffffff;position: absolute; left:40px; top: 150px;width: 120px; font: 400 22px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center;}
.small_title {color: #ffffff;position: absolute; left:80px; top: 220px;width: 120px; font: 400 15px "Open Sans"; transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; text-align: center; opacity:0;}
.circle_wrapper:hover .small_title {opacity: 1;}
.circle_wrapper:hover .circle_filler{width: 600px; height: 600px; transform: rotate(30deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); background-color: rgba(22,147,165,0.63); z-index:-1; position: absolute; top:40px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s;left: -150px;}
.circle_wrapper:hover .title {left: 80px;}

您可以在这里实时查看->www.advicity.ro

如果您将鼠标悬停在圆圈上，蓝色背景不会一直隐藏。考虑到这是一个特定的错误，我的搜索有点有限，我找到的所有答案都没有修复它

有什么想法吗？（如果你有有效的东西，解释一下会有助于将来参考）

谢谢！

Answer 1

Safari在边界半径修剪时被破坏：-s

您的快速解决方案是添加到

.circle_wrapper{border:60px solid #FFF; margin:-30px;}

此外，将边界半径从像素更改为百分比。如果你想要圆形，最好的方法是使border-radius:50%;

然后使main_wrapper从950像素变为980px；：）你完成了：）

另一个更复杂的解决方案是使用口罩：更多信息：https://www.webkit.org/blog/181/css-masks/