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

Posted 2023-03-06

【中文标题】在过渡期间更新变换会导致过渡在 IE 和 MS 边缘闪烁

【英文标题】：Updating transform during transition causes transition to flicker on IE and MS edge

【发布时间】：2017-12-29 04:57:26

【问题描述】：

考虑以下代码（简化）：

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

【参考方案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";

【讨论】：

有效，但与转换相比表现不佳（推荐阅读：html5rocks.com/en/tutorials/speed/high-performance-animations）