溢出隐藏与边框半径和translate3d

Question

当具有overflow: hidden;和border-radius属性的块的内容被翻译时，其边角不会被隐藏。是否有解决方案来修复这个问题？

HTML

<div class="scroller">
    <div class="scroller-content"></div>
</div>

CSS

.scroller{
    width: 300px;
    height: 500px;
    border: 3px solid red;
    border-radius: 30px;
    overflow: hidden;
}
.scroller-content{
    width: 300px;
    height: 300px;
    background: green;
    -webkit-transform: translate3d(0, -8px, 0);
}

http://jsfiddle.net/aZ5Qn/

- Artem Svirskyi

---

可能是 Webkit边框半径与css3 translate3D混合导致的溢出问题 的重复。 - Evan Mulawski

@EvanMulawski 这并没有帮助，你可以自己尝试一下，它会在边框后面隐藏。 - Artem Svirskyi

这是Webkit中的一个错误： http://code.google.com/p/android/issues/detail?id=25499 - Chtioui Malek

Answer 1

事实上，你只需要在需要使用 overflow 和 border-radius 的元素上加入以下代码：transform: translate3d(0,0,0);。

- curly_brackets

Answer 2

因为您没有使用translate中的z，所以可以将其更改为translate2d，如下：

演示

.scroller{
width: 300px;
height: 500px;
border: 3px solid red;
border-radius: 30px;
overflow: hidden;
}
.scroller-content{
width: 300px;
height: 300px;
background: green;
-webkit-transform: translate(0, -8px);
}

这个问题在Chtiwi Malek提供的链接里有记录，但那里仅仅提到是针对移动浏览器的，而我在桌面上也遇到了同样的问题。

编辑

如果你在同一个元素中设置overflow和transform，它也可以（至少在桌面上）正常工作。

.scroller{
    width: 300px;
    height: 500px;
    border: 3px solid red;
    border-radius: 30px;
    overflow: hidden;   
    -webkit-transform: translate3d(0, -8px, 5px);
}
.scroller-content{
    width: 300px;
    height: 300px;
    background: green;
}

- vals

---

不幸的是，我需要使用 translate3d。 - Artem Svirskyi

就像vals提到的那样，只需在容器上设置一个小的translate3d即可使overflow:hidden起作用。我使用了transform: translate3d(0, 0, -1px); - Simon Epskamp