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

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;

这是一个小提琴:http://jsfiddle.net/acbabis/0v8v2xd7/

问题是第二个(蓝色)元素与第一个(红色)元素的旋转方式不同,即使我在javascript中告诉它.

对我来说这看起来像个错误.是吗？

编辑:我的实际代码在每个浏览器中工作,但最新的Chrome,但似乎我的示例代码在所有浏览器中断.我还是想明白为什么会出现上述问题.

编辑2:让它再次打破Chrome 37.我的猜测是它不喜欢科学记数法; 但那么为什么计算出的风格会有呢？

Answer 1

这是一个相当常见的问题，旧版本的 Chrome 和其他供应商也会发生类似的错误。

正如 Hashem 部分提到的，通常的解决方法是要么将旋转更改为类似的内容，要么通过在旋转之外89.9deg执行类似的操作来强制 GPU 渲染。演示。将来我们也可以通过使用该属性来强制执行此操作translateZ(1px)will-change

这是因为浏览器在渲染某些内容时遇到困难，而渲染元素精确旋转 90 度就是其中之一。有时他们需要一点帮助:)