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;}

你可以在这里观看 - ＆gt; www.advicity.ro

如果将鼠标悬停在圆圈上，则蓝色背景不会保持隐藏状态。鉴于这是一个特定的错误，我的搜索有点受限，我找到的所有答案都没有解决。

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

谢谢！

Answer 1

在边界半径修剪方面，Safari被破坏了：-s

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

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

另外，将border-radius从像素更改为百分比，如果想要圆，最好的方法是border-radius:50%;

然后使main_wrapper从950到980px; :)你完成了:)）

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

css mac webkit浏览器（safari / chrome）溢出隐藏的边框半径bug

1 个答案: