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

147

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.

jmotes
quelle

Antworten:

183

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

graue Krähe
quelle
3
Vielen Dank für dieses Update. habe es heute auf safari ausprobiert (v6.0.2) und dort für mich gearbeitet!
Billythetalented
6
Dadurch werden jedoch alle Schatten auf dem Element unterbrochen.
Jack James
1
Dies funktioniert auch bei Wrappern mit absolut positionierten Kindern, bei denen die andere Lösung hier nicht funktioniert. Nett!
Dan Tello
2
mit Chrome 42.0.2311.90 (64-Bit), und dieses Update ist noch erforderlich ... danke!
Simon
2
Ihre Lösungen entfernen Schatten des übergeordneten Elements.
ABDeveloper
105

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

Jackolai
quelle
@Sifu: Du liegst einfach falsch. Aus irgendeinem Grund löste das Hinzufügen eines Z-Index wie vorgeschlagen genau dieses Problem für mich (in der aktuellen Version von Chrome), und dies ist eine einfachere, allgemeinere Lösung als die Top-Antwort.
Nick F
7
@simon: Denken Sie daran, dass bestimmte Bedingungen erfüllt sein müssen, damit sich der Z-Index auswirkt (z. B. muss die Position festgelegt werden). Sehen Sie hier für die Details.
Nick F
@ NickF - es war ein Fehler in Chrome (-ium); -webkit-mask-image: -webkit-radial-gradient(circle, white, black);war eine effektive Problemumgehung, aber zum Glück wurde der Fehler im letzten Update behoben, das ich für Chrome erhalten habe.
Simon
Z-Index 1 zum Container. Z-Index -1 zum absoluten Element hat es für mich gelöst.
AztraL-EnForceR
Dieser hat für mich gearbeitet. Die obige Wrapper-Lösung funktioniert nicht.
Ruwen
58

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/

jmotes
quelle
12
Dies funktioniert, weil positionierte Elemente ihren Inhalt in Webkit nicht auf ihren Rahmenradius zuschneiden. Diese zusätzliche Ebene sorgt einfach dafür, dass das Div mit dem Randradius NICHT positioniert wird und sich einfach in einem positionierten Element befindet.
Daniel Beardsley
9
Würdest du zufällig wissen, ob dies ein Fehler / beabsichtigtes Verhalten ist?
Jmotes
4
+1 Stimme zum Fehler ... Wenn Sie eine Bildergalerie haben, die automatisch die Divs generiert und die Position auf absolut setzt, dann ist diese "Funktion" wirklich sux ...
inf3rno
@ RunLoop Ich habe gerade die jsfiddle in Safari 7.1 getestet und funktioniert einwandfrei. Können Sie genauer sagen, was nicht funktioniert?
Jmotes
1
Unser Kollege, der Grafikdesigner, "entdeckte" diese 20 Sekunden, bevor er diese Antwort fand: D
Pere
18

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

flavi1
quelle
2
transform: translateY(0);ist eine Alternative, die das gleiche Ergebnis erzielt, ohne die visuelle Darstellung des Objekts zu beeinträchtigen (es sei denn, Sie verwenden die Perspektive).
Kontur
15

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/

Nakrill
quelle
4
transform: translateZ(0)ist genug für mich.
Kalvn
Beachten Sie, dass dies (insbesondere translateZ) implizit die Hardwarebeschleunigung für Ihre Elemente ermöglicht, wodurch in einigen Fällen leider eine brandneue Dose Würmer geöffnet wird.
Doldt
transform: translateZ(0)arbeitete auch für mich. In meinem Fall ist es keine schlechte Idee, dass dieser Artikel hardwarebeschleunigt ist.
Sebastien Lorber
9

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 !

antoni
quelle
Ich denke, Sie können diesen noch mehr Clip-Pfad verkürzen : Einschub (0%); ... nur einen Clip-Pfad zu haben scheint den Trick zu tun :-)
Jakob E
Beeindruckend. Es ist die perfekte Antwort.
Shashank Bhatt
4

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/

Rami Awar
quelle
3

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/

Grzegorz Pawlik
quelle
2

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/

gts101
quelle
1

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;
}
Matze
quelle
Warum border-radiussollten Sie sich in dieser Situation überhaupt die Mühe machen, den Wrapper aufzusetzen? Sie erhalten das gleiche Ergebnis, wenn Sie ihn nur aufsetzen #box. Wenn der #boxRahmenradius nur zur Korrektur von WebKit dient, können Sie die -webkit-Eigenschaft auch einfach dort einfügen .
Robertc
Labyrinth, dies mag in einigen Situationen funktionieren, aber in meinem Fall suche ich nach einer Lösung, die die Form der Box nicht verändert (und der Wrapper funktioniert immer noch als Maske). Mein Beispiel war sehr vereinfacht, aber ich versuche, den Wrapper zu verwenden, um Dropshadow vor der Box zu verbergen (indem ich den Wrapper auffülle, um nur die gewünschten Schattenkanten sichtbar zu machen).
Jmotes
1
Danke für die Hilfe durch Maze! Ihre Lösung hat mir geholfen, das Problem kritischer zu betrachten. Übrigens können Sie die Bearbeitung, die ich an Ihrem Beitrag vorgenommen habe, ignorieren. Ich wollte es zu meinem eigenen machen. Entschuldigung :)
jmotes
@ user480837 Kein Problem Kumpel, froh, dass ich geholfen habe. :)
Labyrinth
1
@Maze Das wird nicht funktionieren, wenn ein Rand irgendeiner Art angewendet wird: jsfiddle.net/ptW85/228
antitoxisch
1

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;
}
Samin
quelle
0

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;
        }
    }
user6039997
quelle