javascript - 旋转(90 度)未在 Chrome 37 中使用 .transform 应用

Question

我有一些代码，直到最近，它还适用于所有支持 CSS 转换的浏览器。它打破了最新的 Chrome (37)。我发现了问题。元素的计算样式的转换不被其他元素接受。

HTML

<div class="one">One</div>
<div class="two">Two</div>
<span></span>

CSS

div {
    width: 100px;
    height: 100px
}

.one {
    background-color: red;
    transform: rotate(90deg);
}

.two {
    background-color: blue
}

Javascript

var oneStyle = window.getComputedStyle(document.querySelector('.one'));
var oneTransform = oneStyle.transform;
document.querySelector('span').innerHTML = 'Tranform value is: ' + oneTransform;
var twoStyle = document.querySelector('.two').style;
twoStyle.transform = oneTransform;

这是一个 fiddle :http://jsfiddle.net/acbabis/0v8v2xd7/

问题是第二个(蓝色)元素不会像第一个(红色)元素那样旋转，即使我在 javascript 中告诉它。

这对我来说像是一个错误。是吗？

编辑:我的实际代码在除最新的 Chrome 之外的所有浏览器中都能正常工作，但我的示例代码似乎在所有浏览器中都出现问题。还是想明白为什么会出现上面的问题。

编辑 2: 让它再次进入 Chrome 37。我的猜测是它不喜欢科学记数法；但是为什么计算样式会有它呢？

Answer 1

这是一个相当普遍的问题，旧版本的 Chrome 和其他 vendor 也会出现类似的错误。

通常的解决方法是，如 Hashem mentioned部分地，要么将旋转更改为 89.9deg 之类的东西，要么通过执行诸如 translateZ(1px) 之类的东西来强制 GPU 渲染除了旋转之外。 Demo .将来我们也可以通过使用 will-change 来强制执行此操作。属性

这是因为浏览器在渲染某些东西时遇到问题，而渲染元素恰好旋转 90 度就是其中之一。有时他们需要一点帮助:)