Comment faire CSS3 arrondis coins cacher débordement dans Chrome/Opera

Question

J'ai besoin d'arrondir les angles sur un div parent pour masquer le contenu de ses enfants. "overflow: hidden" œuvres dans des situations simples, mais des pauses dans les navigateurs basés sur webkit et Opera lorsque le parent est positionné de manière relative ou absolue.

Cela fonctionne dans Firefox et 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>

Exemple sur JSFiddle

Merci pour l'aide!

Mise à JOUR: Le bug à l'origine de ce problème a été depuis fixe dans google Chrome. Je n'ai pas re-testé Opera ou Safari.

Answer 1

J’ai trouvé une autre solution pour ce problème. Cela ressemble à un autre bogue dans WebKit (ou probablement Chrome), mais ça marche. Tout ce que vous devez faire - est d’ajouter un Masque de WebKit CSS à l’élément #wrapper. Vous pouvez utiliser une image png de pixel unique et même l’inclure à la CSS pour enregistrer une requête HTTP.

Exemple JSFiddle

Answer 2

Ajouter un index-z de votre border-radius serait point, et il masquera les choses à l’intérieur.

Answer 3

Tant pis tout le monde, j’ai réussi à résoudre le problème en ajoutant un div supplémentaire entre la boîte et l’emballage.

CSS

HTML

Merci à tous ceux qui ont aidé !

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

Answer 4

Semble celui-ci fonctionne :

http://jsfiddle.net/qWdf6/82/

Answer 5

Pas une réponse, mais c’est un bug déposé sous la source de chrome : http://code.google.com/p/chromium/issues/detail?id=62363

Malheureusement, ne ressemble pas il y a quelqu'un à travailler dessus. :(