Jak sprawić, by zaokrąglone rogi CSS3 ukryły przepełnienie w Chrome / Opera

Potrzebuję zaokrąglonych rogów nadrzędnego elementu DIV, aby zamaskować zawartość przed jego potomkiem. overflow: hiddendziała w prostych sytuacjach, ale psuje się w przeglądarkach opartych na webkitach i Operze, gdy rodzic jest ustawiony względnie lub absolutnie.

Działa to w przeglądarce Firefox i 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>

Przykład na JSFiddle

Dzięki za pomoc!

AKTUALIZACJA: błąd powodujący ten problem został już naprawiony w Chrome. Nie testowałem jednak ponownie Opery ani Safari.

Znalazłem inne rozwiązanie tego problemu. Wygląda to na kolejny błąd w WebKit (lub prawdopodobnie w Chrome), ale działa. Wszystko, co musisz zrobić - to dodać maskę CSS WebKit do elementu #wrapper. Możesz użyć pojedynczego piksela png, a nawet dołączyć go do CSS, aby zapisać żądanie 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;
}​

Przykład JSFiddle

Dodaj indeks Z do elementu z border-radius, a zamaskuje on rzeczy w nim zawarte.

Nieważne dla wszystkich, udało mi się rozwiązać problem, dodając dodatkowy element div między opakowaniem a pudełkiem.

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>

Dziękuję wszystkim, którzy pomogli!

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

krycie: 0,99; na opakowaniu rozwiązuje błąd webkita

Wygląda na to, że ten działa:

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

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

Obsługiwane w najnowszym Chrome, Opera i Safari, możesz to zrobić:

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

Zdecydowanie powinieneś sprawdzić narzędzie http://bennettfeely.com/clippy/ !

Brak odpowiedzi, ale to zgłoszony błąd w źródle Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Niestety nie wygląda na to, żeby ktoś nad tym pracował. :(

zmień krycie elementu nadrzędnego za pomocą obramowania, co spowoduje zmianę organizacji ułożonych w stos elementów. To zadziałało cudownie po wielu godzinach poszukiwań i nieudanych próbach. Było to tak proste, jak dodanie krycia 0,99 w celu ponownego zorganizowania procesu malowania przeglądarek. Sprawdź http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Jak dla mnie żadne z rozwiązań nie działało dobrze, tylko przy użyciu:

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

element opakowania wykonał zadanie.

Tutaj przykład: http://jsfiddle.net/gpawlik/qWdf6/74/

w oparciu o doskonałą odpowiedź Graycrow ...

Oto bardziej realny przykład, w którym znajdują się dwa cykliczne elementy DIV z pewną zawartością wypełniacza. Zastąpiłem zakodowane na stałe tło png tylko wartością szesnastkową, tj

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

jest zastępowany przez

-webkit-mask-image:#fff;

Zobacz ten JSFiddle ... http://jsfiddle.net/hqLkA/

Zobacz, jak to zrobiłem; Jsfiddle

Dzięki kodowi, który wstawiłem, udało mi się uruchomić go na Webkit (Chrome / Safari) i Firefox. Nie wiem, czy działa z najnowszą wersją Opery. Tak, działa w najnowszej wersji Opery.

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

Próbowałem każdej odpowiedzi, ale bezskutecznie. Po kilku godzinach badania znalazłem rozwiązanie tego problemu. Użycie tych właściwości w Twojej klasie nie pozwoli elementom div na przepełnienie kontenera.

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

Jeśli chcesz utworzyć maskę dla obrazu i umieścić obraz w kontenerze, nie ustawiaj atrybutu „pozycja: absolutna”. Wszystko, co musisz zrobić, to zmienić margines lewy i prawy margines. Chrome / Opera będzie przestrzegać przepełnienia: reguł ukrytych i obramowań.

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