Using width and transform on transition causes flickering

Question

Check out this JSBIN: http://jsbin.com/hufibisawa/1/edit?css,js,output

Fire up Chrome:

1. Click the test button
2. Click the test2 button
3. You will see the green bar flickers. I suppose it is because a "translate3d" does not calculate its pixels the same way "width" does

When using "left" and "width" properties together it works perfectly, but it is not as performant. The reason is that translate3d triggers HW acceleration and uses sub-pixel calculations, which gives an extremely smooth animation.

Is it a bug? Is it solvable? Using Firefox this works just great! So maybe a Chrome bug?

The 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;
}

And the 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)';

});

Answer 1

You can work around the issue by animating the green box from the right instead moving it from the left. E.G. http://jsbin.com/ximigitawe/1/