为啥我的 transform: translateY 在 Chrome 中闪烁？

Posted 2023-03-06

【中文标题】为啥我的 transform: translateY 在 Chrome 中闪烁？

【英文标题】：Why does my transform: translateY flicker in Chrome?为什么我的 transform: translateY 在 Chrome 中闪烁？

【发布时间】：2017-09-13 05:13:54

【问题描述】：

我有一个简单的多列布局；我正在尝试使用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

【问题讨论】：

有趣的是，对我来说（Safari 10.1）只有顶行的中间和右侧图片闪烁，其他图像按预期来回移动。

由于 Chrome 也是 Webkit，这可能会解决您的问题：***.com/questions/2946748/…

This 也类似。你看过these Google results了吗？许多似乎都适用。

尝试将 will-change:transform; 添加到您的 a 元素 ***.com/a/43281723/2887133 ... 似乎可以工作 codepen.io/anon/pen/qmdGRj

在 Safari 上我也觉得不错...

【参考方案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;
  

【讨论】：

同样的修复也适用于新的 bootstrap 4 卡片组！