Why is my conversion: translator flickering in Chrome?

Question

I have a simple multi-column layout; I am trying to raise an element to :hover using translateY .

This causes flickering (tested on Chrome 57). How to fix it?

 "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

Placing the following code in an element with the transform property should decide:

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

In your case:

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