Xoay (90deg) không được áp dụng bằng cách sử dụng .transform trong Chrome 37

Question

Tôi có một số mã mà, cho đến gần đây, đã làm việc trên tất cả các trình duyệt hỗ trợ chuyển đổi CSS. Nó đã phá vỡ trong Chrome mới nhất (37). Tôi đã tìm thấy vấn đề. Biến đổi từ kiểu được tính toán của một phần tử không được chấp nhận bởi các phần tử khác.

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; 

Đây là một Fiddle: 0.123.

Vấn đề là phần tử thứ hai (màu xanh) không xoay giống như phần tử đầu tiên (màu đỏ) mặc dù tôi đã nói với nó trong javascript.

Điều này trông giống như một lỗi đối với tôi. Là nó?

EDIT: Mã thực tế của tôi đã hoạt động trên mọi trình duyệt nhưng Chrome mới nhất, nhưng dường như mã mẫu của tôi bị hỏng trong tất cả các trình duyệt. Tôi vẫn muốn hiểu tại sao vấn đề trên xảy ra.

CHỈNH SỬA 2: Chỉ nhận lại Chrome 37. Tôi đoán là nó không thích ký hiệu khoa học; nhưng tại sao kiểu tính toán lại có nó?

Answer 1

Đây là vấn đề khá phổ biến, các lỗi tương tự cũng xảy ra với các phiên bản cũ hơn của Chrome và các nhà cung cấp khác.

Khắc phục thông thường là, như Hashem mentioned một phần, để thay đổi xoay thành thứ gì đó như 89.9deg hoặc buộc hiển thị GPU bằng cách thực hiện một cái gì đó như translateZ(1px) ngoài vòng xoay. Demo. Trong tương lai, chúng tôi cũng có thể ép buộc điều này bằng cách sử dụng thuộc tính will-change

Điều này là do trình duyệt gặp sự cố khi hiển thị một số yếu tố và kết xuất chính xác 90 độ. Đôi khi họ cần một chút trợ giúp :)