When using column-count, overflowing content completely disappears in all but first column, why?

Question

When using column-count in a wrapper, and the containers in the wrapper have border-radius applied, and content in the container is overflowing, the content completely disappears in all the columns, except the first one.

Here is my example: https://jsfiddle.net/f4nd7tta/
The red semi-circle is only visible in the first column, why?

#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

I honestly have no idea why this happens, I am looking the docs if they have specified this behavior, I want to check whether its intentional or it's a bug. For now I am using

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

And it works... So add the above properties in #main_wrap > div and I think if you are ruling out the vendor prefixes than transform: translateX(0); is sufficient.

Demo

Ok, I think it's a bug :

Issue 84030 : CSS 3 Column bug (overflow: hidden like functionality where it shouldn't)

The absolute positioned elements are clipped as if there is an overflow: hidden applied to the box. However, applying overflow: visible or any other rule does not fix the problem

---

I thought more over this, as I suggested the first solution which I randomly inserted the properties and it worked, there is also a way where you can legally do what you are doing by using a clip property and you won't need overflow: hidden; anymore..

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

Answer 2

I spent quite a bit of time investigating this problem and found the suggestion to add the CSS property will-change: transform; to the items inside the column layout. For example:

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