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 C

Answer 1

Here's a simple work-around for Chrome: For your yellow blocks, just change the width and the margin. For the drop-shadow to show up you want to make sure there is some margin room around the block.

width: 80%;
margin: 1em 10%;

http://jsfiddle.net/dPg2n/1/ --- Works in both Chrome 31 and FireFox 10.0.2.

Answer 2

I think column-count is conflicting with chrome...

Try This:

div#column-container {
  /* Set 2 columns*/
  /* insignificant */
  width: 50%;
}

div#column-container div {
  background-color: yellow;

  /* set shadow for yellow elements */
  box-shadow: 0px 0px 15px #000;
  -webkit-box-shadow: 0px 0px 15px #000;
  -moz-box-shadow:    0px 0px 15px #000;

  /* Make sure that yellow div is not split between columns */
  display: inline-block;

  /* the rest - not significant */
  width: 46%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;
  margin-right: 2%;
  float:left;
}

Answer 3

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.

Answer 4

div#column-container {   
    /* Set 2 columns*/
    overflow: hidden;
    padding: 5px;
    display: block;

     /* insignificant */
    width: 50%;
}

div#column-container div {
    background-color: yellow;
    float: left;
    width: 40%;
    margin: 5%;

    /* 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: block;

    /* the rest - not significant */
    height: 70px;
}

This will give you almost similar look.

And the Fiddle is here.

P.S.Alter the margin and width values by yourself to make the boxes closer as per your requirement.

Answer 5

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 6

Chrome is failing to compensate for the extra width added by the shadow.

If you add "text-align: center;" to the div#column-container, the yellow inner div will center and you can now see shadow on the left edge.

If change the insignificant "width: 100%;" on the yellow inner div to "width: 85%;" (or a width of your choice) now there is room for the entire shadow.

div#column-container {   
  /* Set 2 columns*/
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

   /* insignificant - except text-align, which corrects Chrome */
  width: 50%;
  text-align: center;
}

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;

  /* the rest - width was significant for Chrome, you may need to adjust for your real project */
  width: 85%;
  height: 70px;
  margin-top: 0;
  margin-bottom: 20px;    
}

Here is a jsFiddle.