Rotation (90deg) doesn't apply using .transform in Chrome 37

Question

I have code that until recently worked on all browsers that support CSS conversions. It broke in the latest Chrome (37). I found a problem. A conversion from a computed element style 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 the script: http://jsfiddle.net/acbabis/0v8v2xd7/

The problem is that the second (blue) element does not rotate in the same way as the first (red) element, although I told it in javascript.

It looks like a mistake to me. It?

EDIT:. My actual code worked in every browser, but the latest Chrome, but it looks like my sample code is broken in all browsers. Anyway, I would like to understand why the above problem arises.

EDIT 2: To iterate over only Chrome 37 again. I guess he doesn't like scientific notation; but then why did he have a calculated style?

Answer 1

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

The usual fix, as described in the Hashem section, is either to change the rotation to something like 89.9deg , or to force the rendering of the graphic object by doing something like translateZ(1px) in addition to the rotation. Demo In the future, we will most likely force this using the will-change property.

This is because browsers have problems displaying certain things, and rendering elements that rotate exactly 90 degrees are one of these things. Sometimes they need a little help :)