Chrome 88 change causing blurred images during translate3d transition

Question

A sliding image gallery has started performing terribly after updating Chrome to 88. See this site for example:

https://fionaandbobby.com/

You can view it in FF or Safari to see it performing how it used to perform in Chrome. After some research I distilled the behavior down a bit in a snippet below.

It appears to be totally dependent on the width of the element being transitioned. I'm sure there are other ways the slider on this site could be coded/styled, and possibly that's the solution. However, it's been working on many, many websites this way for years. Wondering if anyone has ideas about how to bypass this behavior. I've tried using the image-rendering CSS property on the img's themselves to no avail.

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

This was a regression in Chrome 88, that is fixed in Chrome 89 (in beta at the time of writing this).