爲什麼我的轉換：translateY在Chrome中閃爍？

Question

我有一個簡單的多列布局;我正在嘗試使用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 Demo

Answer 1

配售下面的代碼中的元素與轉換屬性解決：

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