overflow hidden with border-radius and translate3d

Question

When content of block with overflow: hidden; and border-radius translated, its corners aren't hidding. Is there any solution to fix this?

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

Accually, you can just put

transform: translate3d(0,0,0);

On your element that needs the overflow + border-radius combo...

Answer 2

Since you are not using the z in the translate, you can change it to translate2d, that does work:

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

This is documented in the link that Chtiwi Malek provided, but there it states that is only for mobile browser, and I have this issue in desktop.

edit

It also works (at least in desktop) if you set overflow and transform in the same element

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