Overflow is hidden with border radius and translate3d

Question

When the contents of a block with overflow: hidden; and border-radius translated, its corners are not exposed. 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

In general, you can just put

transform: translate3d(0,0,0);

In an element that needs an overflow + border-radius combine ...

Answer 2

Since you do not use z in translation, you can change it to translate2d, which works:

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 described in the link provided by Chtiwi Malek, but it says that it is only for a mobile browser, and I have this problem on the desktop.

change

It also works (at least on the desktop) if you set the overflow and conversion to 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; }