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

this should work too : http://codepen.io/anon/pen/fiHCv

(from my comment to get your feeling about it :) )

It might work using calc() to reduce width of blocks to let shadows being seen and rework margin and padding for nicer layout

div#column-container {   
    /* Set 2 columns*/
    column-count: 2;
  column-gap:0;
  width:80%;
  margin:auto;
  padding:20px 0;
}

div#column-container div {
    background-color: yellow;
    box-shadow: 0px 0px 15px #000; 

    /* Make sure that yellow div is not split between columns */
    display: inline-block;
  /* leave room for shadow to be drawn */
    width: calc(100% - 30px);
    /* the rest - just to better present the problem */
    height: 70px;
    margin: 20px;    
}

manage margin and padding, so top of columns may be on same vertical level and fit to your grid

Answer 2

Had similar issues with a 3 column layout. Chrome cut the box-shadow but only on top in column 2 and 3...

box-shadow cut

Margin Workaround:

.item {
  box-shadow: 0px 0px 15px #000;
  display: inline-block;
  margin-top: 15px; /* same as box-shadow blur */     
  width: 100%;
}
.container{
  column-count: 3;
  column-gap: 30px;
  margin-top: -15px;/* negative value same as box-shadow blur & item margin-top */
}

Answer 3

Here's a related bug filed with chromium. Basically, it seems that chrome just isn't that good at rendering the css columns properties. https://code.google.com/p/chromium/issues/detail?id=467196