Issue/Bug with z-index, overflow, and column-count on Chrome - html

Question

Looks like there is a chrome bug that hides content of columns greater than one. Really stumped on this one. Also looks like the easing on the hover is not working nicely on columns 2 and 3 as well.
<div class="col3">
<div id="box">
<div class="content-item-description">
Weekly Sales - Limited Time Only - While Supplies Last!
</div>
<div id="overlay">
<span id="plus">This is cool</span>
</div>
</div>
<div id="box">
<div class="content-item-description">
Weekly Sales - Limited Time Only - While Supplies Last!
</div>
<div id="overlay">
<span id="plus">This is cool</span>
</div>
</div>
<div id="box">
<div class="content-item-description">
Weekly Sales - Limited Time Only - While Supplies Last!
</div>
<div id="overlay">
<span id="plus">This is cool</span>
</div>
</div>
</div>
and here is the CSS
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
position: relative;
}
#overlay {
background: rgba(0,0,0,.60);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
height: 100%;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255,255,255,.85);
font-size: 12px;
}
.content-item-description {
position: absolute;
}
.col3 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Codepen Example: http://codepen.io/anon/pen/GjyKE

Answer 1

first of all, all your div elements are using IDs, change them to classes or you won't be able to re-use them. So, your HTML should look like this:
<div class="col3">
<div class="box">
<div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
<div class="overlay"> <span class="plus">This is cool</span>
</div>
</div>
<div class="box">
<div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
<div class="overlay"> <span class="plus">This is cool</span>
</div>
</div>
<div class="box">
<div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
<div class="overlay"> <span class="plus">This is cool</span>
</div>
</div>
</div>
Now, with proper HTML, we can make better use of CSS, like this:
body {
background:#e7e7e7;
}
.box {
width:300px;
height:200px;
box-shadow:inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size:cover;
border-radius:5px;
overflow:hidden;
position: relative;
display:inline-block;
}
.overlay {
background:rgba(0, 0, 0, .60);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
top:0;
left:0;
position:absolute;
transition: all .5s ease;
height: 100%;
width:100%;
z-index:5
}
.box:hover > .overlay {
opacity:1;
}
.plus {
font-family:Helvetica;
font-weight:900;
color:rgba(255, 255, 255, .85);
font-size:12px;
}
.content-item-description {
position: relative;
top:0;
left:0;
z-index:100;
width:100%;
height:50%;
}
In short, nothing wrong with Chrome (at least in this case), but all fault is on your coding
See you forked Codepen example

Answer 2

TRY - DEMO
It's a bit hack:
Use transform: translateX(-0.99px); and margin: 0px -0.5px; to the first div#box
Note: margin = -0.5px and transform = -0.99px doesn't apply any extra margin or width to your HTML elements and it also doesn't force the div#box to move or push the Next Pixel.
You can also use below CSS properties for only webkit broswers:
-webkit-margin-start: -0.5px;
-webkit-margin-end: -0.5px;
-webkit-transform: translateX(-0.99px);
HTML:
<div class="col3">
<div class="box" style="transform: translateX(-0.99px); margin: 0px -0.5px;">
<div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
<div class="overlay">
<span class="plus">This is cool</span>
</div>
</div>
<div class="box">
<div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
<div class="overlay">
<span class="plus">This is cool</span>
</div>
</div>
<div class="box">
<div class="content-item-description">Weekly Sales - Limited Time Only - While Supplies Last!</div>
<div class="overlay">
<span class="plus">This is cool</span>
</div>
</div>
</div>
CSS:
body {
background:#e7e7e7;
}
.box {
width:300px;
height:200px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size:cover;
border-radius:5px;
overflow:hidden;
position: relative;
}
.overlay {
background:rgba(0,0,0,.60);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease; height: 100%;}
.box:hover #overlay {
opacity:1;
}
.plus {
font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:12px;
}
.content-item-description {
position: absolute;
}
.col3 {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}