Border-Radius 疯狂 CSS Webkit 与 Facebook 页面插件的消失

Question

我今天在开发一个新站点时发现了一个非常奇怪 的错误，我真的不知道为什么会这样，但我想有人可能知道。

我做了一个固定在页面 top-right 部分的导航菜单，里面有一个很大的 div 由很多 border-radius.

组成

在我向右侧栏添加 facebook 页面插件之前，它工作得非常好和正常。
当 div 的底部越过插件中页面的标题时，border-radius 就会消失。它在那里时保持正方形 div，如果我滚动页面并保持圆形直到 "touching" 那个页面插件的非常具体的部分。

我真的不知道为什么，这里有一些代码可以更好地理解：

.nav {
    position:fixed;
    width:100%;
    text-align:right;
    z-index:9999;
}
.face {
    position:absolute;
    width: 20%; 
    background:#F93;
    top:5px;
    right:10px;
    border-radius:9999px;
    overflow:hidden;
}

.face:before {
    content: "";
    display: block;
    padding-top: 95%;

}
.face a img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%
}
.menu{
    display:inline-block;
    background:#FFF;
    padding:1em;
    width:50%;
    text-align:left;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    margin-top:3%;

}

.menu a {
    padding:0 0.5em;
    border-radius:4em;
}

还有：

<div class="nav">
<div class="menu">
<a href="#">menu</a><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<a href="#"><img src="i/image.png"/></a>
</div>
</div>

顺便说一句，它似乎只发生在 webkit 浏览器上，在 firefox 上看起来很正常，甚至没有在 internet explorer 中测试。

编辑：刚刚在 Internet Explorer 上测试过，令人惊讶的是它确实运行良好，这现在非常非常奇怪

EDIT2：一些截图以进一步说明：

在触摸标题之前：

到达那个非常具体的位置后：

再往下：

只要超过标题就不是圆的，其他地方都可以。

EDIT3：我发现错误发生在另一个地方；我在页面上有一个 jquery 滑块；我在某些控件上悬停时有一个不透明度效果，当这些不透明度被动画化时，它再现了消失的 border-radius 问题，然后自行恢复正常；从中性状态中删除不透明度 CSS 规则使错误在悬停滑块时停止发生，但是当 div 在 facebook 插件

上时它会继续发生

Answer 1

由于 Facebook 插件的原因，这里可能会发生更多事情，但听起来这是一个没有考虑 Webkit CSS 规则的问题。如果这是问题所在，我很惊讶 Firefox 没有给您带来麻烦。跨浏览器支持设置圆角样式的标准方法是给出 border-radius，然后是 -moz-border-radius 和 -webkit-border-radius:

.menu {
    ...
    border-radius: 100px 0px 0px 100px;
    -moz-border-radius: 100px 0px 0px 100px;
    -webkit-border-radius: 100px 0px 0px 100px;
    ...
}
.menu a {
    ...
    border-radius: 4em;
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
}

Answer 2

好的，我找到了解决问题的方法，我只能认为我以前没有想到，因为我太累了。 ^^'

首先，我发现这个错误比我想象的还要奇怪，回想另一个元素上的不透明度似乎如何影响它，我尝试改变图像不透明度，然后，我发现 div 包含它的实际上仍然是圆的。

即使图像被 overflow:hidden; 剪切，它也没有被父 div 的 border-radius 剪切。

我也通过在图像上添加 border-radius 来修复它，所以现在即使在那个插件上它也是圆的，问题现在消失了。

我希望有一天这会被一些 webkit 开发人员发现并识别并修复那个错误，这真的很奇怪。

也感谢亨利的帮助！

TL;DR

已通过在父级 div 和图像上使用 border-radius 修复。

Border-Radius 疯狂 CSS Webkit 与 Facebook 页面插件的消失

Border-Radius Crazy CSS disappeareance in Webkit with Facebook Page Plugin

html

css

iframe

webkit