Chrome 88 更改导致 translate3d 过渡期间图像模糊

问题描述

在将 Chrome 更新到 88 后，滑动图片库开始表现得非常糟糕。请参阅此站点的示例：

https://fionaandbobby.com/

您可以在 FF 或 Safari 中查看它，以了解它在 Chrome 中的表现。经过一些研究，我在下面的片段中对行为进行了一些提炼。

它似乎完全取决于被转换元素的宽度。我确信还有其他方法可以对本网站上的滑块进行编码/样式化，这可能就是解决方案。但是，多年来，它一直在以这种方式在许多网站上运行。想知道是否有人对如何绕过这种行为有想法。我试过在 img 本身上使用图像渲染 CSS 属性，但无济于事。

var button = document.getElementsByTagName('button')[0];
var ul = document.getElementsByTagName('ul')[0];

button.addEventListener('click',function() {
  ul.classList.toggle('move');
});

var select = document.getElementsByTagName('select')[0];

select.addEventListener('change',function(e) {
  ul.setAttribute('style',`width: ${e.target.value}px`);
});

div {
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.68s ease;
  transform: translate3d(0,0);
}

ul.move {
  transform: translate3d(100px,0);
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  height: 300px;
  width: 533px;
}

footer {
  margin-top: 40px;
}

Select different widths of the containing ul element in the dropdown below and then click the translate button to see the effect.
<div>
  <ul>
    <li style="width: 500px">
       <img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufdb8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3289&q=80" />
    </li>
  </ul>
</div>
<footer>
  <label>
    Width of wrapping element being translated
    <select>
      <option value="1000">1000px</option>
      <option value="100000">100000px</option>
      <option value="10000000">10000000px</option>
    </select>
  </label>
  <button>translate</button>
</footer>

解决方法

这是 Chrome 88 中的一个回归，在 Chrome 89 中已修复（在撰写本文时处于测试阶段）。