Rounded corners fail to cut off content in webkit browsers if position:relative

Question

Rounded corners fail to cut off content in webkit browsers (e.g. Chrome) if position:relative;

See this demo.

HTML:

<div class="outer">     <div class="inner">     </div> <div> 

CSS:

.outer {     background:yellow;     border:solid 1px black;     position:relative;/* Setting this means rounded corners don't cut off content! */     overflow:hidden;      -moz-border-radius: 12px;     border-radius: 12px;    } .inner {     background:red;     height:50px; } 

Anyone know of a fix? Thanks-

Answer 1

http://jsfiddle.net/USd5s/

Hate to add extra dom elements but a simple wrapper fixes this right up. You don't have to use my choice of element or css method either, span and qualified css is just my taste. or something would work just as well.

Answer 2

You can force it to render in 3d with:

-webkit-transform: translateZ(0);    -moz-transform: translateZ(0);    transform: translateZ(0);