Come fare in modo che gli angoli arrotondati CSS3 nascondano l'overflow in Chrome / Opera

Ho bisogno di angoli arrotondati su un div genitore per mascherare il contenuto dai suoi figli. overflow: hiddenfunziona in situazioni semplici, ma interrompe i browser basati su webkit e Opera quando il genitore è posizionato in modo relativo o assoluto.

Funziona con Firefox e 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>

Esempio su JSFiddle

Grazie per l'aiuto!

AGGIORNAMENTO: il bug che causa questo problema è stato risolto da Chrome. Non ho ancora testato nuovamente Opera o Safari.

Ho trovato un'altra soluzione per questo problema. Sembra un altro bug in WebKit (o probabilmente Chrome), ma funziona. Tutto quello che devi fare - è aggiungere una maschera CSS WebKit all'elemento #wrapper. Puoi usare un'immagine png a singolo pixel e persino includerla nel CSS per salvare una richiesta 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;
}​

Esempio JSFiddle

Aggiungi un indice z al tuo oggetto con raggio di confine e maschererà le cose al suo interno.

Non importa a tutti, sono riuscito a risolvere il problema aggiungendo un ulteriore div tra il wrapper e la scatola.

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>

Grazie a tutti coloro che hanno aiutato!

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

opacità: 0,99; sul wrapper risolve il bug del webkit

Sembra che questo funzioni:

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

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

Supportato negli ultimi Chrome, Opera e Safari, puoi farlo:

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

Dovresti assolutamente dare un'occhiata allo strumento http://bennettfeely.com/clippy/ !

Non una risposta, ma questo è un bug archiviato sotto la fonte di Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Sfortunatamente, non sembra che ci sia qualcuno che ci sta lavorando. :(

cambia l'opacità dell'elemento genitore con il bordo e questo riorganizzerà gli elementi sovrapposti. Questo ha funzionato miracolosamente per me dopo ore di ricerca e tentativi falliti. È stato semplice aggiungere un'opacità di 0,99 per riorganizzare questo processo di verniciatura dei browser. Dai un'occhiata a http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Per quanto mi riguarda nessuna delle soluzioni ha funzionato bene, usando solo:

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

sull'elemento wrapper ha fatto il lavoro.

Ecco l'esempio: http://jsfiddle.net/gpawlik/qWdf6/74/

basato sull'ottima risposta di Graycrow ...

Ecco un esempio più reale del mondo che ha due div cicolari con alcuni contenuti di riempimento. Ho sostituito lo sfondo PNG hard-coded con solo un valore esadecimale, vale a dire

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

è sostituito da

-webkit-mask-image:#fff;

Vedi questo JSFiddle ... http://jsfiddle.net/hqLkA/

Qui guarda come l'ho fatto; Jsfiddle

Con il codice che ho inserito, sono riuscito a farlo funzionare su Webkit (Chrome / Safari) e Firefox. Non so se funziona con l'ultima versione di Opera. Sì, funziona con l'ultima versione di 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;
}

Ho provato tutte le risposte ma senza successo. Dopo alcune ore di investigazione ho trovato la soluzione a questo problema. L'uso di queste proprietà nella classe non consentirà agli elementi div di traboccare il contenitore.

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

Se stai cercando di creare una maschera per un'immagine e posizionare l'immagine all'interno del contenitore, non impostare l'attributo 'position: absolute'. Tutto quello che devi fare è cambiare il margine sinistro e il margine destro. Chrome / Opera aderirà all'overflow: regole nascoste e border-radius.

// 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;
        }
    }