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

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

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;
}

Answer 2

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