Chrome 88改变导致图像模糊在translate3d过渡

Question

Chrome升级到88后，一个滑动图库开始表现糟糕。请看这个站点的示例:

https://fionaandbobby.com/

你可以在FF或Safari中查看它，看看它在Chrome中的表现如何。经过一番研究，我将这种行为提炼成下面的代码片段。

它似乎完全取决于被转换元素的宽度。我相信还有其他的方法可以在这个网站上的滑块编码/样式，可能这是解决方案。然而，多年来，它一直在许多网站上以这种方式工作。想知道是否有人有关于如何绕过这种行为的想法。我已经尝试过使用图像渲染的CSS属性在img的自己没有效果。

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, 0);
}
ul.move {
transform: translate3d(100px, 0, 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>

Answer 1

这是Chrome 88的一个回归，在Chrome 89(在写这篇文章的时候是测试版)中修复了。