Box-shadow trimmed in CSS columns in Chrome - google-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.

Answer 3

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 4

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 5

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.

Answer 6

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 7

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 8

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 9

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

Answer 10

A quick workaround is to surround your boxes in larger transparent divs that leave enough room for the shadow. This solves both of the problems.
<div id="column-container">
<div class="outer"><div>box 1</div></div>
<div class="outer"><div>box 2</div></div>
<div class="outer"><div>box 3</div></div>
<div class="outer"><div>box 4</div></div>
<div class="outer"><div>box 5</div></div>
<div class="outer"><div>box 6</div></div>
</div>
div#column-container {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
div#column-container div {
background-color: yellow;
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;
width: 100%;
height: 70px;
margin: 0;
}
.outer {
break-inside: avoid;
padding-top: 0px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 20px;
}

Answer 11

.box {
break-inside: avoid;
column-count: 2;
column-gap: 2rem;
}
.item {
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);
}