web-dev-qa-db-fra.com

Lorsque le nombre de colonnes est utilisé, le contenu en débordement disparaît complètement dans toutes les colonnes sauf la première, pourquoi?

Lorsque column-count est utilisé dans un wrapper et que border-radius est appliqué sur les conteneurs du wrapper et que son contenu est saturé, le contenu disparaît complètement dans toutes les colonnes, à l'exception de la première. 

Voici mon exemple: https://jsfiddle.net/f4nd7tta/
Le demi-cercle rouge n’est visible que dans la première colonne, pourquoi?

#main_wrap{
    width:100%;
    border:solid 1px black;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
#main_wrap > div{
    border-radius:5px;
    overflow:hidden;
    position:relative;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
    width:70%;
    height:300px;
    border:solid 2px grey;
    margin:2px;
}
#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
}
<div id="main_wrap">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

csscss3css-multicolumn-layoutcolumn-count
26
Eduárdó

Honnêtement, je ne sais absolument pas pourquoi cela se produit. Je regarde les docs s'ils ont spécifié ce comportement, je veux vérifier si c'est intentionnel ou s'il s'agit d'un bug. Pour l'instant j'utilise 

-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);

Et ça marche ... Alors ajoutez les propriétés ci-dessus dans #main_wrap > div et je pense que si vous excluez les préfixes du vendeur, alors transform: translateX(0); suffit.

Démo

Ok, je pense que c'est un bug: 

Issue 84030: Bogue de colonne CSS 3 (débordement: fonctionnalité masquée telle qu'elle ne devrait pas l'être)

Les éléments en position absolue sont coupés comme s'il y avait un débordement: masqué appliqué à la boîte. Cependant, en appliquant un débordement: visible ou toute autre règle ne résout pas le problème

Je pensais plus à cela, car j'avais suggéré la première solution d'insérer aléatoirement les propriétés et que cela fonctionnait. Il existe également un moyen de faire légalement ce que vous faites en utilisant une propriété clip et vous n'avez plus besoin de overflow: hidden;. .

#main_wrap > div > div{
    position:absolute;
    background:red;
    border-radius:40px;
    width:40px;
    height:40px;
    right:-20px;
    top:0;
    clip: rect(0px,20px,40px,0px);
}

Démo 2(Clip Démo)

16
Mr. Alien

J'ai passé pas mal de temps à étudier ce problème et j'ai trouvé la suggestion d'ajouter la propriété CSS will-change: transform; aux éléments de la disposition des colonnes. Par exemple:

<div class="container">
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
  <div class="item">
    <!-- Things with overflowing content -->
  </div>
</div>

<style>
  .container {
    columns: auto 5;
    column-gap: 0;
    margin: -16px;
  }

  .items {
    break-inside: avoid;
    padding: 16px;
    page-break-inside: avoid;
    will-change: transform;
  }
</style>
3
Benjamin Humphrey

S'il vous plaît trouver un exemple de travail de mon R&EACUTE;PONSE , j'ai testé dans Firefox et Chrome.

CODE HTML
<!--you can add as many divs as you like it will work -->
<div id="main_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CODE CSS
#main_wrap{
  width:100%;
}

#main_wrap > div{
  width:20%; #***
  height:250px; #***
  background:whitesmoke;
  float:left;
  position:relative;
  overflow:hidden;
  border-radius:5px;
  border:2px solid gray;
  margin-left: 10.75%; #***
  margin-bottom:1rem; #***
}

#main_wrap > div:after{
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  right:-20px;
}

J'ai recréé la présentation illustrée dans votre exemple, mais vous devrez peut-être apporter des modifications pour obtenir votre présentation finale. Pour cela jouer avec les propriétés marquées (# ***)

0
T04435