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

Posted

技术标签:

【中文标题】Chrome 88 更改在 translate3d 过渡期间导致图像模糊【英文标题】:Chrome 88 change causing blurred images during translate3d transition 【发布时间】:2021-05-14 15:11:51 【问题描述】:

将 Chrome 更新到 88 后,滑动图片库开始表现不佳。例如,请参阅此网站:

https://fionaandbobby.com/

您可以在 FF 或 Safari 中查看它,以了解它在 Chrome 中的表现。经过一些研究,我在下面的 sn-p 中稍微提炼了这种行为。

它似乎完全取决于被转换元素的宽度。我敢肯定还有其他方法可以对本网站上的滑块进行编码/样式化,这可能就是解决方案。但是,多年来,它一直以这种方式在许多网站上工作。想知道是否有人对如何绕过这种行为有想法。我已经尝试在 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.valuepx`);
);
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>

【问题讨论】:

【参考方案1】:

这是 Chrome 88 中的回归,已在 Chrome 89 中修复(在撰写本文时处于测试阶段)。

【讨论】:

以上是关于Chrome 88 更改在 translate3d 过渡期间导致图像模糊的主要内容,如果未能解决你的问题,请参考以下文章

-webkit-transform:translate3d(0,0,0)触发GPU加速,让网页动画更流畅

Chrome 是不是更改了检测信用卡字段的方式? [复制]

转换原点 (css) Chrome (88) 错误

CSS3 calc(100%-88px) 在 Chrome 中不起作用 [重复]

触摸移动触发时css过渡不一致

Chrome v88+ 和 Nestjs 服务器上的 socket-io 连接出现 CORS 错误