溢出隐藏的border-radius和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/

Answer 1

准确地说，你可以把

transform: translate3d(0,0,0);

在您的元素上需要overflow + border-radius组合...

Answer 2

由于您没有在翻译中使用z，您可以将其更改为translate2d，这确实有效：

demo

.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提供的链接中记录了这一点，但它指出仅适用于移动浏览器，我在桌面版中遇到此问题。

修改

如果设置溢出并在中转换相同的元素

，它也可以（至少在桌面中）

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