我有一个简单的多列布局;我正试图解除一个元素：使用translateY悬停.

它会导致闪烁(在Chrome 57上测试).我该如何解决？

"use strict";

$(function () {
  var $target = $('.wall');

  function getImageUrl(id) {
    var width = 500;
    var height = 250 + Math.floor(Math.random() * 150);
    return "https://unsplash.it/" + width + "/" + height + "?image=" + id;
  }

  function addElement(element) {
    var $template = $target.find('.template').clone().appendTo($target).removeClass("template");

    $template.find("a").attr("href",element.post_url);

    $template.find("img").attr("src",getImageUrl(element.id));

    $template.find("figcaption").text(element.author);

    $template.removeClass("hide");
  }

  $.getJSON("https://unsplash.it/list",function (data) {
    var images = 12;
    var elements = [];

    function getRandomImage() {
      var id = Math.floor(Math.random() * data.length);
      return data.splice(id,1)[0];
    }

    while (images > elements.length) {if (window.CP.shouldStopExecution(1)){break;}
      elements.push(getRandomImage());
    }
window.CP.exitedLoop(1);


    elements.forEach(function (element) {
      addElement(element);
    });
  });
});

.wall {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  padding-top: 0.5rem;
}
.wall * {
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
}
.wall .brick {
  display: block;
  padding-bottom: 1rem;
}
.wall .brick a {
  display: inline-block;
  color: inherit;
  -webkit-transition: -webkit-transform 333ms ease;
  transition: -webkit-transform 333ms ease;
  transition: transform 333ms ease;
  transition: transform 333ms ease,-webkit-transform 333ms ease;
}
.wall .brick a:hover,.wall .brick a:focus {
  -webkit-transform: translateY(-1rem);
          transform: translateY(-1rem);
}
.wall .brick .thumbnail {
  margin-bottom: 0.5rem;
}
.wall .brick figcaption {
  text-align: center;
}