मेरा परिवर्तन क्यों करता है: क्रोम में अनुवादित झिलमिलाहट?

Question

मेरे पास एक साधारण बहु-कॉलम लेआउट है; मैं पर translateY का उपयोग कर एक तत्व उठाने की कोशिश कर रहा हूं।

यह झिलमिलाहट (क्रोम 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; 
    } 
}