Webkit border-radius clipping issue with overflow and transform

by Binyamin

HTML

Webkit border-radius clipping issue with overflow and transform <a href=http://crbug.com/157218>crbug.com/157218</a>, <a href=http://wkb.ug/68196>wkb.ug/68196</a><br>
If you still see red background, then the issue is still not solved.
<div class=outer>
    <div class=inner>no transform</div>
</div>
<div class=outer>
    <div class="inner transform">with transform</div>
</div>

CSS

.outer {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: rgb(0,238,228);
    border: 3px solid #000;
    border-radius: 50%;
}
.inner {
    height: 100%;
    line-height: 5.8;
	text-align: center;
    background-color: rgba(255,0,0,.5);
}
.transform {
    -webkit-transform: translate3d(0,0,0);
    		transform: translate3d(0,0,0);
}