Comment faire en sorte que les coins arrondis CSS3 masquent le débordement dans Chrome / Opera

J'ai besoin de coins arrondis sur un div parent pour masquer le contenu de ses enfants. overflow: hiddenfonctionne dans des situations simples, mais se casse dans les navigateurs basés sur le Webkit et dans Opera lorsque le parent est positionné de manière relativement 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 bogue à l'origine de ce problème a été résolu depuis dans Chrome. Je n'ai cependant pas retesté Opera ou Safari.

J'ai trouvé une autre solution à ce problème. Cela ressemble à un autre bogue dans WebKit (ou probablement dans Chrome), mais cela fonctionne. Tout ce que vous avez à faire est d'ajouter un masque CSS WebKit à l'élément #wrapper. Vous pouvez utiliser une image png d'un seul pixel et même l'inclure dans le CSS pour enregistrer une requête HTTP.

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

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

Exemple JSFiddle

Ajoutez un z-index à votre élément à rayon de bordure, et il masquera les choses à l'intérieur.

Peu importe tout le monde, j'ai réussi à résoudre le problème en ajoutant un div supplémentaire entre le wrapper et la boîte.

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>

Merci à tous ceux qui ont aidé!

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

opacité: 0,99; sur le wrapper résoudre le bogue du kit Web

Il semble que celui-ci fonctionne:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

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

Pris en charge dans les derniers chrome, opéra et safari, vous pouvez le faire:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

Vous devriez certainement consulter l'outil http://bennettfeely.com/clippy/ !

Pas de réponse, mais il s'agit d'un bug classé sous la source Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Malheureusement, personne ne semble y travailler. :(

changez l'opacité de l'élément parent avec la bordure et cela réorganisera les éléments empilés. Cela a fonctionné miraculeusement pour moi après des heures de recherche et des tentatives infructueuses. C'était aussi simple que d'ajouter une opacité de 0,99 pour réorganiser ce processus de peinture des navigateurs. Consultez http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Quant à moi, aucune des solutions n'a bien fonctionné, en utilisant uniquement:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

sur l'élément wrapper a fait le travail.

Voici l'exemple: http://jsfiddle.net/gpawlik/qWdf6/74/

basé sur l'excellente réponse de Graycrow ...

Voici un exemple plus réel du monde qui a deux divs ciculaires avec du contenu de remplissage. J'ai remplacé l'arrière-plan png codé en dur par juste une valeur hexadécimale, c'est-à-dire

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

est remplacé par

-webkit-mask-image:#fff;

Voir ce JSFiddle ... http://jsfiddle.net/hqLkA/

Regardez ici comment je l'ai fait; Jsfiddle

Avec le code que j'ai mis, j'ai réussi à le faire fonctionner sur Webkit (Chrome / Safari) et Firefox. Je ne sais pas si cela fonctionne avec la dernière version d'Opera. Oui, cela fonctionne sous la dernière version d'Opera.

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

J'ai essayé toutes les réponses mais sans succès. Après quelques heures d'enquête, j'ai trouvé une solution à ce problème. L'utilisation de ces propriétés dans votre classe ne permettra pas aux éléments div de déborder du conteneur.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Si vous cherchez à créer un masque pour une image et à positionner l'image à l'intérieur du conteneur, ne définissez pas l'attribut 'position: absolute'. Tout ce que vous avez à faire est de changer la marge gauche et la marge droite. Chrome / Opera respectera les règles de débordement: masqué et bord-rayon.

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }