溢出隐藏的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，这确实有效：

演示

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