在过渡中使用宽度和变换会导致闪烁

Using width and transform on transition causes flickering

本文关键字：变换 闪烁      更新时间：2023-09-26

查看此JSBIN: http://jsbin.com/hufibisawa/1/edit?css,js,output

启动Chrome:

  1. 点击测试按钮
    2. 点击test2按钮
  2. 您将看到绿色条闪烁。我想这是因为"translate3d"不计算其像素相同的方式"宽度"做

当同时使用"left"answers"width"属性时，效果很好，但性能不佳。原因是translate3d触发HW加速并使用亚像素计算，这提供了一个非常平滑的动画。

是bug吗?是可解的吗?使用Firefox，这工作得非常好!所以可能是Chrome浏览器的bug?

css 

#test {
  position: absolute;
  transition: transform 1s ease-out, width 1s ease-out;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 300px;
  height: 25px;
  background-color: red;
}
#test2 {
  position: absolute;
  transition: transform 1s ease-out, width 1s ease-out;
  left: 0;
  transform: translate3d(0, 25px, 0);
  top: 0;
  width: 300px;
  height: 25px;
  background-color: green;
}

和JS

document.querySelector('#button').addEventListener('click', function () {
var el = document.querySelector('#test');
  el.style.width = '150px';
  el.style.transform = 'translate3d(0px, 0px, 0)';
  var el = document.querySelector('#test2');
  el.style.width = '150px';
  el.style.transform = 'translate3d(150px, 0px, 0)';
});
document.querySelector('#button2').addEventListener('click', function () {
var el = document.querySelector('#test');
  el.style.width = '300px';
  el.style.transform = 'translate3d(0px, 0px, 0)';
  var el = document.querySelector('#test2');
  el.style.width = '300px';
 el.style.transform = 'translate3d(0, 25px, 0)';
});

您可以通过从右侧而不是从左侧移动绿色框来解决这个问题。例如http://jsbin.com/ximigitawe/1/

相关文章：