CSS transform transition layout flash in WebKit(可能是布局缓存导致的？)

Question

我一直在尝试在元素上使用 CSS 变换来使绝对定位的图像居中，以便我可以将位置从中心过渡到左侧。这是我一直在使用的基本代码(在所有组合中都带有供应商前缀)。

position: absolute;
left: 50%;
height: 100%;
transform: translateX(-50%);
transition: transform 1s, left 1s;

然后在悬停时，以下属性发生更改。

left: 0;
transform: translateX(0%);

这一切都很完美，但是当包装器的高度在转换过程中也发生变化时，问题就开始了。 WebKit 似乎在过渡元素时缓存元素之前的宽度，并且由于宽度/高度在过渡期间发生变化，一旦到达过渡结束，它就会跳转到它所属的位置。这是一个显示我的问题的 JSFiddle。它在 Firefox 和 IE10 中完美运行，但基于 WebKit 的浏览器 Chrome、Safari 和 Opera 在悬停结束时有一个布局闪光。

JSFiddle Example

在过去的几天里，我尝试了所有我能想到的方法来欺骗 WebKit 使其正常运行，包括添加额外的 CSS 属性、过渡、动画，甚至使用 requestAnimationFrame 和计时器在元素上触发重排，但似乎没有任何效果帮助。如果有人能提供解决方案，我将不胜感激。

Answer 1

这显然是 CSS 转换的供应商前缀实现中的一个错误，它预先计算目标并且在回流后不更新它。它不再在较新版本的 WebKit 中的无前缀版本中出现。