CSS column issues with box shadow [duplicate] - html

Question

This question already has answers here:
Box-shadow trimmed in CSS columns in Chrome
(11 answers)
Closed 7 years ago.
I am using CSS Column count to create a grid. However, I cannot fix a slight issue regarding the box shadow I am using.
It seems that the top row of each column has the top clipped off. This doesn't effect the border, but only box shadow.
heres a fiddle: http://jsfiddle.net/DTcHh/3947/
If you look closely you can see that the top row items have no shadow, and it looks like it has been clipped to the bottom of the column? Scroll to the bottom of the container and you will see the top part of the shadow there.
Any ideas how to fix?
Some back up css:
#builds {
width: 96%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 2%;
}
.cols {
-moz-column-count:3;
-webkit-column-count:3;
column-count: 3;
}
.item {
height: auto;
width: 99%;
margin-left: 1%;
-webkit-column-break-inside: avoid;
-o-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
border: 4px solid #000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
<div id="builds" class="cols">
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
</div>
Padding to the top of the columns container does not work. And if I give the items class a margin of 10, it works on the first element but not the others.

Answer 1

At first I thought I'm not seeing well since I wear glasses, But I think the problem is that you have two box-shadows with both y-offsets are positive. If you want to have a shadow on top of the element, the y-offset should be negative:
box-shadow: 0 -1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
Is this what you expect: http://jsfiddle.net/pnrv7byy/2/ ?

Answer 2

I have been looking at this problem myself for quite some time before I noticed box-shadow was the source of inconsistent balancing in Webkit between same size boxes in my layout.
I believe the problem is this: Webkit (and Blink) have a bug with box-shadow and column where box-shadow affects layout calculation and messes up the column flow.
Currently it appears that Safari 9 and Blink 46 Versions (perhaps earlier versions) have fixed part of column flow issues in terms of the overall column heights calculation. However unlike IE, Edge and Firefox, Safari 9 and Chrome still count the box-shadow as an extra gap. And Chrome in particular cuts off the box-shadow, also apparently ignoring break-inside...
Here is my alternative to Nadeemmnn's solution:
http://jsfiddle.net/hexalys/DTcHh/14980/
The difference is I avoid an extra inside div wrapper for the box-shadow. Instead, I use a margin-bottom roughly equal to the box-shadow dimension +0.5px in this case. And I use margin-top for the top margin with inline-block(s) instead of blocks. Which is what i'd recommend inside columns.
It's hackish, but it seems to work ok for me so far.
PS: I'll go ahead and report those browser bugs if not already filed.

Answer 3

Here are my two solutions
Solution1:
HTML
<div id="builds" class="cols">
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Bassboy,539.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" />
</div>
</div>
<div class="item">
<div class="thumbnail">
<img src="http://buildsanctuary.com/user_uploads/cover_images/Chino,920.jpeg" />
</div>
</div>
</div>
Demo
here we have removed the box-shadow for item and added for thumbnail i.e from bootstrap
Solution2
Demo2