未使用Chrome 37中的.transform应用旋转(90度）

Rotate(90deg) not being applied using .transform in Chrome 37

本文关键字：旋转 90度 应用 transform Chrome 中的 未使用      更新时间：2023-09-26

我有一些代码，直到最近，它们还适用于所有支持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中破解。我的猜测是它不喜欢科学记数法；但为什么计算风格会有它呢？

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

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

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

相关文章：