在过渡期间更新变换会导致过渡在 IE 和 MS 边缘闪烁

Question

考虑以下代码（简化）：

html：

<button>move!</button>
<div/>

js:

var div = document.getElementsByTagName('div')[0]
var x = 0

document.getElementsByTagName('button')[0].onclick = function () {
  x = x + 100
  div.style.transform = 'translate3d(' + x + 'px, 0,0)'
}

css：

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: transform 0.5s linear;
}

在过渡期间反复更改 transform 属性会导致 div 在过渡到正确值之前闪烁（朝向先前的起始位置）。

这似乎只发生在 MS 浏览器上（在 IE11 和 MS Edge 上测试）。

还在 Chrome、Safari、FF 上进行了测试，均按预期工作。

见小提琴：https://jsfiddle.net/youridaamen/8pnLfmpt/12/

相关：MS Edge CSS transform transition flickering on mouse move

Answer 1

我已将变换样式更改为 marginLeft，它似乎工作得更好（在 IE 上）。 jsfiddle

Javascript/JQuery：

var buttons = document.getElementsByTagName('button')
var start = buttons[0]
var reset = buttons[1]
var div = document.getElementsByTagName('div')[0]
var x = 0

start.onclick = function () {
x+=100;
div.style.marginLeft = x + "px";
}

reset.onclick = function () {
x = 0
div.style.marginLeft = x + "px";
}