So lassen Sie abgerundete CSS3-Ecken den Überlauf in Chrome / Opera verbergen

Ich brauche runde Ecken auf einem Eltern-Div, um Inhalte von seinen Kindern zu maskieren. overflow: hiddenFunktioniert in einfachen Situationen, bricht jedoch in Webkit-basierten Browsern und Opera ab, wenn das übergeordnete Element relativ oder absolut positioniert ist.

Dies funktioniert in Firefox und 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>

Beispiel für JSFiddle

Danke für die Hilfe!

UPDATE: Der Fehler, der dieses Problem verursacht, wurde seitdem in Chrome behoben. Ich habe Opera oder Safari jedoch nicht erneut getestet.

Ich habe eine andere Lösung für dieses Problem gefunden. Dies sieht aus wie ein weiterer Fehler in WebKit (oder wahrscheinlich Chrome), funktioniert aber. Sie müssen lediglich eine WebKit-CSS-Maske zum Element #wrapper hinzufügen. Sie können ein Einzelpixel-PNG-Bild verwenden und es sogar in das CSS aufnehmen, um eine HTTP-Anforderung zu speichern.

#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;
}​

JSFiddle-Beispiel

Fügen Sie Ihrem Element mit Rahmenradius einen Z-Index hinzu, der die darin enthaltenen Elemente maskiert.

Trotzdem habe ich es geschafft, das Problem zu lösen, indem ich ein zusätzliches Div zwischen Wrapper und Box hinzugefügt habe.

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>

Vielen Dank an alle, die geholfen haben!

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

Opazität: 0,99; auf Wrapper Webkit-Fehler lösen

Scheint, dass dies funktioniert:

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

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

Unterstützt in den neuesten Versionen von Chrome, Oper und Safari können Sie dies tun:

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

Sie sollten auf jeden Fall das Tool http://bennettfeely.com/clippy/ überprüfen !

Keine Antwort, aber dies ist ein Fehler unter der Chromium-Quelle: http://code.google.com/p/chromium/issues/detail?id=62363

Sieht leider nicht so aus, als würde jemand daran arbeiten. :((

Wenn Sie die Deckkraft des übergeordneten Elements mit dem Rahmen ändern, werden die gestapelten Elemente neu organisiert. Dies funktionierte auf wundersame Weise für mich nach stundenlangen Nachforschungen und fehlgeschlagenen Versuchen. Es war so einfach wie das Hinzufügen einer Deckkraft von 0,99, um diesen Malprozess von Browsern neu zu organisieren. Überprüfen Sie http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Was mich betrifft, hat keine der Lösungen gut funktioniert, nur mit:

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

auf dem Wrapper-Element hat die Arbeit erledigt.

Hier das Beispiel: http://jsfiddle.net/gpawlik/qWdf6/74/

basierend auf der hervorragenden Antwort von Graycrow ...

Hier ist ein realistischeres Beispiel mit zwei speziellen Divs mit etwas Füllstoffgehalt. Ich habe den fest codierten PNG-Hintergrund durch nur einen Hex-Wert ersetzt, d. H.

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

wird ersetzt durch

-webkit-mask-image:#fff;

Siehe diese JSFiddle ... http://jsfiddle.net/hqLkA/

Hier schau dir an, wie ich es gemacht habe; Jsfiddle

Mit dem von mir eingegebenen Code gelang es mir, ihn auf Webkit (Chrome / Safari) und Firefox zum Laufen zu bringen. Ich weiß nicht, ob es mit der neuesten Version von Opera funktioniert. Ja, es funktioniert unter der neuesten Version von 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;
}

Ich habe jede Antwort ausprobiert, aber ohne Erfolg. Nach einigen Stunden der Untersuchung fand ich eine Lösung für dieses Problem. Wenn Sie diese Eigenschaften in Ihrer Klasse verwenden, können div-Elemente den Container nicht überlaufen lassen.

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

Wenn Sie eine Maske für ein Bild erstellen und das Bild im Container positionieren möchten, setzen Sie nicht das Attribut 'position: absolute'. Alles was Sie tun müssen, ist den Rand links und rechts zu ändern. Chrome / Opera hält sich an den Überlauf: versteckte Regeln und Regeln für den Randradius.

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