web-dev-qa-db-de.com

Wie CSS3 abgerundete Ecken den Überlauf in Chrome / Opera verbergen

Ich brauche runde Ecken an einem Elternteil, um den Inhalt vor seinen Kindern zu verbergen. overflow: hidden funktioniert in einfachen Situationen, bricht jedoch in Webkit-basierten Browsern und Opera, 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 auf 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.

htmlcssrounded-cornerscss3
146
jmotes

Egal, ich habe es geschafft, das Problem zu lösen, indem ich eine zusätzliche Unterteilung zwischen Wrapper und Box eingefü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 mitgeholfen haben!

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

56
jmotes

Ich habe eine andere Lösung für dieses Problem gefunden. Dies sieht aus wie ein weiterer Fehler in WebKit (oder wahrscheinlich Chrome), aber es funktioniert. Alles, was Sie tun müssen, ist, dem #wrapper-Element ein WebKit-CSS-Maske hinzuzufügen. Sie können ein einzelnes Pixel-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

180
graycrow

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

103
Jackolai

opazität: 0,99; auf Wrapper Webkit-Fehler beheben

18
flavi1

Scheint so:

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

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

15
nakrill

Unterstützt in neuestem Chrome, opera 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 ausprobieren http://bennettfeely.com/clippy/ !

8
antoni

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

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

6
ryan

ändern Sie die Deckkraft des übergeordneten Elements mit dem Rahmen, um die gestapelten Elemente neu zu organisieren. Dies hat nach stundenlangen Recherchen und gescheiterten Versuchen auf wundersame Weise für mich funktioniert. Es war so einfach wie das Hinzufügen einer Deckkraft von 0,99, um diesen Paint-Prozess von Browsern neu zu organisieren. Check out http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

4
Rami Awar

basierend auf Graycrows exzellenter Antwort ...

Hier ist ein realistischeres Beispiel, das zwei Cicular Divs mit etwas Füllstoff enthält. Ich habe den hartcodierten PNG-Hintergrund durch 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/

2
gts101

Für mich 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/

2
Grzegorz Pawlik

Hier sehen Sie, wie ich es gemacht habe; Jsfiddle

Mit dem Code, den ich eingegeben habe, habe ich es geschafft, 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;
}
1
Maze

Wenn Sie eine Maske für ein Bild erstellen und das Bild im Container positionieren möchten, setzen Sie das Attribut 'position: absolute' nicht. Sie müssen lediglich den linken und den rechten Rand ändern. Chrome/Opera befolgt den Überlauf: versteckte Regeln und Regeln für den Rahmenradius.

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