[解決済み] Chrome/OperaでCSS3角丸のオーバーフローを非表示にする方法

質問

子要素のコンテンツを隠すために、親要素の角を丸くする必要があります。 overflow: hidden は単純な状況では動作しますが、親が相対的または絶対的に配置されている場合、webkitベースのブラウザとOperaでは壊れます。

FirefoxとIE9で動作します。

CSS

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

HTML

<div id="wrapper">
  <div id="box"></div>
</div>

JSFiddleでの例

ありがとうございました。

UPDATEしてください。 この問題を引き起こしていたバグは、Chromeで修正されています。OperaとSafariは再テストしていません。

解決するには？

私はラッパーとボックスの間に追加のdivを追加することによって問題を解決することができました。

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

ご協力いただいた皆様、ありがとうございました。

→ http://jsfiddle.net/5fwjp/