Drehen (90 Grad) wird nicht angewendet mit .Transform in Chrome 37

Question

Ich habe Code, der bis vor kurzem an allen Browsern arbeitete, die CSS-Transformationen unterstützen. Es hat im neuesten Chrome (37) eingebrochen. Ich habe das Problem gefunden. Die Transformation aus dem berechneten Stil eines Elements wird von anderen Elementen nicht akzeptiert.

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; 

ist hier ein Fiddle: 0.123.

Das Problem ist, dass das zweite (blaue) Element nicht gleich rotiert wie das erste (rote) Element, obwohl ich es im Javascript gesagt habe.

Das sieht für mich wie ein Fehler aus. Ist es?

EDIT: Mein tatsächlicher Code funktionierte in jedem Browser, aber das neueste Chrome, aber es scheint, dass mein Beispielcode in allen Browsern bricht. Ich möchte immer noch verstehen, warum das obige Problem auftritt.

EDIT 2: Habe es geschafft, nur in Chrome 37 wieder einzubrechen. Meine Vermutung ist, dass es die wissenschaftliche Notation nicht mag; Aber warum sollte der berechnete Stil das haben?

Answer 1

Dies ist ein ziemlich häufiges Problem, ähnliche Fehler treten auch bei älteren Versionen von Chrome und anderen Anbietern auf.

Die übliche Lösung ist, wie Haschem mentioned teilweise entweder auf die Rotation um so etwas wie 89.9deg oder Kraft GPU-Rendering zu ändern, indem Sie so etwas wie translateZ(1px) neben der Rotation zu tun. Demo. In Zukunft können wir dies wahrscheinlich auch mit der will-change Eigenschaft

erzwingen. Dies liegt daran, dass Browser Probleme haben, bestimmte Dinge zu rendern und Renderelemente genau um 90 Grad gedreht ist eines dieser Dinge. Manchmal brauchen sie ein wenig Hilfe :)