web-dev-qa-db-fra.com

Comment faire en sorte que les coins arrondis de CSS3 cachent un débordement dans Chrome / Opera

J'ai besoin de coins arrondis sur une div mère pour masquer le contenu de ses enfants. overflow: hidden fonctionne dans des situations simples, mais avec une rupture dans les navigateurs Webkit et Opera lorsque le parent est positionné de manière relative ou absolue.

Cela fonctionne dans Firefox et 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>

Exemple sur JSFiddle

Merci pour l'aide!

UPDATE: Le bug à l'origine de ce problème a été corrigé depuis dans Chrome. Je n'ai pas re-testé Opera ou Safari cependant.

htmlcssrounded-cornerscss3
146
jmotes

Peu importe, j'ai réussi à résoudre le problème en ajoutant une division supplémentaire entre l'emballage et la boîte.

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>

Merci à tous ceux qui ont aidé!

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

56
jmotes

J'ai trouvé une autre solution à ce problème. Cela ressemble à un autre bogue de WebKit (ou probablement de Chrome), mais cela fonctionne. Tout ce que vous devez faire - est d’ajouter un WebKit CSS Mask à l’élément #wrapper. Vous pouvez utiliser une seule image png de pixel et même l'inclure au CSS pour enregistrer une requête 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;
}​

Exemple JSFiddle

180
graycrow

Ajoutez un index z à votre élément avec un rayon de bordure et il masquera les éléments qu'il contient.

103
Jackolai

opacité: 0,99; sur le wrapper résoudre le bug du webkit

18
flavi1

Semble que celui-ci fonctionne:

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

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

15
nakrill

Pris en charge dans le dernier chrome, opera et safari, vous pouvez le faire:

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

Vous devriez certainement consulter l'outil http://bennettfeely.com/clippy/ !

8
antoni

Pas une réponse, mais il s'agit d'un bogue répertorié sous la source Chromium: http://code.google.com/p/chromium/issues/detail?id=6236

Malheureusement, il ne semble pas que quiconque y travaille. :(

6
ryan

modifiez l'opacité de l'élément parent avec la bordure pour réorganiser les éléments empilés. Cela a fonctionné miraculeusement pour moi après des heures de recherche et d’essais infructueux. Il était aussi simple d'ajouter une opacité de 0,99 pour réorganiser ce processus de peinture des navigateurs. Départ http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

4
Rami Awar

basé sur l'excellente réponse de graycrow ...

Voici un exemple plus réaliste avec deux divs ciculaires avec un peu de charge. J'ai remplacé l'arrière-plan png codé en dur par une valeur hexadécimale, c'est-à-dire.

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

est remplacé par

-webkit-mask-image:#fff;

Voir ce JSFiddle ... http://jsfiddle.net/hqLkA/

2
gts101

En ce qui me concerne, aucune des solutions n’a bien fonctionné, à savoir:

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

sur l'élément d'emballage a fait le travail.

Voici l'exemple: http://jsfiddle.net/gpawlik/qWdf6/74/

2
Grzegorz Pawlik

Regarde comment je l'ai fait; Jsfiddle

Avec le code que j'ai mis, j'ai réussi à le faire fonctionner sur Webkit (Chrome/Safari) et Firefox. Je ne sais pas si cela fonctionne avec la dernière version d'Opera. Oui, cela fonctionne sous la dernière version d'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

Si vous cherchez à créer un masque pour une image et à la positionner dans le conteneur, ne définissez pas l'attribut 'position: absolute'. Tout ce que vous avez à faire est de changer les marges gauche et droite. Chrome/Opera se conformera au débordement: règles cachées et rayon-rayon.

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