Box-shadow trimmed in CSS columns in Chrome

Question

I want the block elements inside CSS columns to have box shadow. The following, simplified code renders as expected in IE10 and Firefox 21, but in current Chrome version (28.0.1500.72) shadows near the column sides are trimmed.

The images present results in IE/FF (on the left), and Chrome on the right:

(there's also some vertical shift, but it's not an issue)

Here's the jsfiddle: http://jsfiddle.net/buli_pl/KxYRc/1/

div#column-container {    /* Set 2 columns*/    -moz-column-count: 2;    -webkit-column-count: 2;    column-count: 2;  }  div#column-container div {    background-color: yellow;    /* set shadow for yellow elements */    box-shadow: 0px 1px 3px #000;    -webkit-box-shadow: 0px 0px 15px #000;    -moz-box-shadow: 0px 0px 15px #000;    box-shadow: 0px 0px 15px #000;    /* Make sure that yellow div is not split between columns */    display: inline-block;    width: 100%;    /* the rest - just to better present the problem */    height: 70px;    margin-top: 0;    margin-bottom: 20px;  }

<div id="column-container">    <div>box 1</div>    <div>box 2</div>    <div>box 3</div>    <div>box 4</div>    <div>box 5</div>    <div>box 6</div>  </div>

Am I misusing some of those properties, or this is a Chrome issue? How can it be fixed at the moment?

Answer 1

Just happened upon a potentially more straightforward solution that seems to work. Applying transform: translateZ(0); to the elements with box-shadows seems to be resolving this issue. In the supplied code, you would add this to your div#column-container div rule.

.container{   break-inside: avoid;   column-count: 2;   column-gap: 2rem; } .box{   border-radius: 4px;   box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);   margin-bottom: 1rem;   padding: 1rem;   break-inside: avoid;   transform: translateZ(0); } 

https://codepen.io/MarkitDigital/pen/RdLoRG

Answer 2

You could use flexbox for this instead of css columns.

FIDDLE

NB: This currently doesn't work in Firefox because it still doesn't support the flex-wrap property, however according to caniuse - this will be supported in version 28

CSS

div#column-container {        height: 270px; /* NB: IE requires the height property. max-height won't work on IE)*/     display: flex;     flex-direction: column;     flex-wrap: wrap;     align-content: flex-start; } 

EDIT: (Updated FIDDLE which includes support for Firefox)

As per @buli's suggestion to temporarily use the -moz-colums-count for Firefox as long as flex-wrap is not supported:

Well, you could do this with the @supports which allows us to perform feature queries - sort of like Modernizr, but with CSS.

The good thing here, is that Firefox supports them.

So if I add the following code: (updated as per Pavlo's suggestion)

@supports (not (flex-wrap: wrap)) and (-moz-columns: 2) {     div#column-container {          -moz-column-count: 2;         column-count: 2;         display: block;         width: 50%;     } } 

Now, Firefox will use CSS columns, whereas other browsers will use flexbox.