使用寬度和轉變轉化導致閃爍

Question

看看這個JSBIN：http://jsbin.com/hufibisawa/1/edit?css,js,output

火了鍍鉻：

1. 點擊測試按鈕
2. 點擊test2的按鈕
3. 你會看到綠色酒吧閃爍。我想這是因爲「translate3d」不會像「寬度」一樣計算像素。

將「左」和「寬」屬性一起使用時，它完美地工作，但它不是性能。原因是translate3d觸發硬件加速並使用子像素計算，從而提供非常流暢的動畫。

這是一個錯誤？它可以解決嗎？使用Firefox這個工作非常棒！所以也許是一個Chrome的錯誤？

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

}); 

Answer 1

可以解決此問題通過從右動畫綠盒子而是從左邊移動。例如。 http://jsbin.com/ximigitawe/1/