UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Example URL:
https://jsfiddle.net/mekanics/tu4ef9m1/

Steps to reproduce the problem:
see an example here: https://jsfiddle.net/mekanics/tu4ef9m1/
and here is the code

html:
<div class="items">
  <article class="item">
    <div class="item__image"></div>
  </article>
  <article class="item">
    <div class="item__image"></div>
  </article>
  <article class="item">
    <div class="item__image"></div>
  </article>
  <article class="item">
    <div class="item__image"></div>
  </article>
  <article class="item">
    <div class="item__image"></div>
  </article>
  <article class="item">
    <div class="item__image"></div>
  </article>
</div>

css:

.items {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 25px;
  -moz-column-gap: 25px;
  column-gap: 25px;
  font-size: 0;

  border: 1px solid black;
}

.item {
  display: inline-block;
  position: relative;
  height: 130px;
  width: 100%;
  background-color: #968782;
  margin-bottom: 25px;
}

.item__image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  //background-image: url(...)
  display: inline-block;
}

.item__image::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 60%;
  background: 0 0;
  background: linear-gradient(to bottom, transparent 0, rgba(255, 0, 0, 0.7) 100%);
  bottom: 0;
  top: auto;
  left: 0;
}

What is the expected behavior?
all .item_image should have an ::after with a red gradient

What went wrong?
only the items in the first column have the gradient 

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 50.0.2661.102  Channel: stable
OS Version: OS X 10.11.4
Flash Version: