为什么我的转换：chromeY在Chrome中闪烁？

Question

我有一个简单的多列布局; 我正试图解除一个元素:hover使用translateY :hover 。

它会导致闪烁（在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; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="wall column"> <div class="hide brick template"> <a> <figure> <img class="thumbnail" /><figcaption></figcaption> </figure> </a> </div> </div> 

CodePen演示

Answer 1

将以下代码放在具有transform属性的元素中应解决：

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

在你的情况下：

a {
  display: inline-block;
  transition: transform 333ms ease;
  &:hover, &:focus {
    transform: translateY(-1rem);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
  }
}