css - número - error 1136(21s01) column count doesn''t match value count at row 1

Cuando se utiliza el recuento de columnas, el contenido desbordado desaparece por completo en todas las columnas excepto en la primera, ¿por qué?

Question

Cuando se utiliza column-count en un envoltorio, y los contenedores en el envoltorio tienen border-radius aplicado, y el contenido del contenedor se desborda, el contenido desaparece por completo en todas las columnas, excepto la primera.

Aquí está mi ejemplo: https://jsfiddle.net/f4nd7tta/
El semicírculo rojo solo es visible en la primera columna, ¿por qué?

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

Answer 1

Pasé bastante tiempo investigando este problema y encontré la sugerencia de agregar la propiedad CSS will-change: transform; a los elementos dentro del diseño de la columna. Por ejemplo:

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

Answer 2

Por favor, encuentre un ejemplo funcional de mi ANSWER , que he probado en Firefox & 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;
}

He recreado el diseño que se muestra en su ejemplo, pero es posible que deba hacer algunos cambios para obtener su diseño final. Para ello jugar con las propiedades marcadas (# ***).

Answer 3

Sinceramente, no tengo idea de por qué sucede esto, estoy buscando en los documentos si han especificado este comportamiento, quiero comprobar si es intencional o si es un error. Por ahora estoy usando

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

Y funciona ... Entonces, agregue las propiedades anteriores en #main_wrap > div y creo que si está descartando los prefijos de proveedores en lugar de transform: translateX(0); es suficiente.

Demo

Ok, creo que es un error:

Problema 84030 : Error de la columna CSS 3 (desbordamiento: ocultado como una funcionalidad donde no debería)

Los elementos posicionados absolutos se recortan como si hubiera un desbordamiento: ocultos aplicados al cuadro. Sin embargo, aplicar desbordamiento: visible o cualquier otra regla no soluciona el problema

Pensé más en esto, ya que sugerí la primera solución en la que inserté las propiedades al azar y funcionó, también hay una manera en la que puedes hacer lo que estás haciendo legalmente usando una propiedad de clip y no necesitarás un overflow: hidden; nunca más..

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

Demo 2 (Clip Demo)