11

I have a simple multi-column layout; I'm trying to lift an element on :hover using translateY.

It causes flickering (tested on Chrome 57). How do I fix this?

"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

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tymek
  • 3,000
  • 1
  • 25
  • 46
  • It might be interesting to note that for me (Safari 10.1) only the middle and right picture of the top row flicker, the other images move back and forth as intended. – 11684 Apr 17 '17 at 15:32
  • 1
    Since Chrome is also Webkit, this might solve your issue: http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker – 11684 Apr 17 '17 at 15:35
  • [This](http://stackoverflow.com/questions/15751012/css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w) is also similar. Did you look at [these Google results](https://www.google.nl/#q=css+transform+flicker) yet? Many seem applicable. – 11684 Apr 17 '17 at 15:40
  • 2
    Try adding `will-change:transform;` to your a element http://stackoverflow.com/a/43281723/2887133 ... seems to work https://codepen.io/anon/pen/qmdGRj – DaniP Apr 17 '17 at 15:44
  • @DaniP Safari simply stops rendering the two images that flickered before after adding the `will-change`. – 11684 Apr 17 '17 at 15:48
  • 1
    Seems fine to me on Safari too ... – DaniP Apr 17 '17 at 15:51
  • Thank you comments! Those suggestions helped. If one of you would like to post it as an answer, I will accept it – Tymek Apr 17 '17 at 21:48

1 Answers1

6

Placing the following code in the element with the transform property should solve:

-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;
  }
}
Emanuel Saramago
  • 462
  • 4
  • 16