Check out this JSBIN: http://jsbin.com/hufibisawa/1/edit?css,js,output
Launch Chrome:
- Click Test Button
- Click test2
- You will see a flickering green bar. I suppose this is because "translate3d" does not calculate its pixels in the same way that "width" does
Using the “left” and “width” properties together, it works fine, but it is not so efficient. The reason is that translate3d launches HW acceleration and uses sub-pixel computation, which gives extremely smooth animations.
This is mistake? Is it solvable? Using Firefox it works just fine! Perhaps a 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; }
And 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)'; });
source share