Bootstrap Card Background Image Bug

Test

HTML

<div class="columns">
  <div class="card">
    Test Text
  </div>

  <div class="card">
    Test Text
  </div>
</div>

CSS

.columns {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.card {
  overflow: hidden;/* needed to trigger bug */
  position: relative;
  width: 200px;
  height: 200px;
  background-color: white;
}
.card::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://placehold.it/300x300');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}