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

Question

I have some code that, until recently, worked on all browsers supporting CSS transforms. It broke in the newest Chrome (37). I found the issue. The transform from the computed style of an element is not accepted by other elements.

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;

Here is a Fiddle: http://jsfiddle.net/acbabis/0v8v2xd7/

The issue is that the second (blue) element does not rotate the same as the first (red) element is even though I told it to in the javascript.

This looks like a bug to me. Is it?

EDIT: My actual code was working in every browser but the newest Chrome, but it appears my sample code breaks in all browsers. I'd still like to understand why the above problem occurs.

EDIT 2: Got it to break in only Chrome 37 again. My guess is that it doesn't like the scientific notation; but then why would the computed style have it?

Answer 1

This is a fairly common problem, similar errors happen with older versions of Chrome and other vendors as well.

The usual fix is, as Hashem mentioned partly, to either change the rotation to something like 89.9deg or force GPU rendering by doing something like translateZ(1px) in addition to the rotation. Demo. In the future we can likely force this as well by using the will-change property

This is because browsers have trouble rendering certain things and rendering elements rotated exactly 90 degrees is one of those things. Sometimes they need a little help :)