css - Chrome bug border-radius+overflow with perspective -

i'm having strange problem chrome.

if create div perspective, border radius, overflow hidden , transformed div inside element wont respect de perspective.

http://codepen.io/cavax/pen/mwpgxz

if remove border radius can see element has perspective.

any idea?

<div id="prova">    <div id="rotate"></div> </div> <div id="prova2">     <div id="rotate2"> </div> </div>  #prova {    width: 400px;    height: 200px;    -webkit-perspective: 400px;    perspective: 400px;    margin: 40px;    border: 1px solid #000;    overflow: hidden;    border-radius: 30px; } #rotate {    width: 200px;    height: 200px;    background-color: red;    -webkit-transform: rotatex(40deg);    transform: rotatex(40deg);    position: absolute;    bottom: 0px;    left: 100px; } #prova2 {    width: 400px;    height: 200px;    -webkit-perspective: 400px;    perspective: 400px;    margin: 40px;    border: 1px solid #000;    overflow: hidden; } #rotate2 {    width: 200px;    height: 200px;    background-color: red;    -webkit-transform: rotatex(40deg);    transform: rotatex(40deg);    position: absolute;    bottom: 0px;    left: 100px; } 

actually overflow:hidden hide perspective area. not display.

when removed overflow:hidden; working

thanks