घुमाएं (90 डिग्री) क्रोम में ट्रांसट्रॉर्म का उपयोग करके लागू नहीं किया जा रहा है 37

Question

मेरे पास कुछ कोड है, हाल ही में, सीएसएस रूपांतरणों का समर्थन करने वाले सभी ब्राउज़रों पर काम किया है। यह नवीनतम क्रोम (37) में तोड़ दिया। मुझे मुद्दा मिला। किसी तत्व की गणना की गई शैली से परिवर्तन अन्य तत्वों द्वारा स्वीकार नहीं किया जाता है।

एचटीएमएल

<div class="one">One</div> 
<div class="two">Two</div> 
<span></span> 

सीएसएस

div { 
    width: 100px; 
    height: 100px 
} 

.one { 
    background-color: red; 
    transform: rotate(90deg); 
} 

.two { 
    background-color: blue 
} 

जावास्क्रिप्ट

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; 

यहाँ एक फिडल है: 0,123,

मुद्दा यह है कि दूसरा (नीला) तत्व पहले (लाल) तत्व के रूप में समान नहीं होता है, भले ही मैंने इसे जावास्क्रिप्ट में बताया हो।

यह मेरे लिए एक बग जैसा दिखता है। क्या यह?

संपादित करें: मेरा वास्तविक कोड प्रत्येक ब्राउज़र में काम कर रहा था लेकिन नवीनतम क्रोम, लेकिन यह मेरे ब्राउज़र में सभी नमूना कोड ब्रेक दिखाई देता है। मैं अभी भी समझना चाहता हूं कि उपर्युक्त समस्या क्यों होती है।

संपादित 2: इसे केवल क्रोम 37 में तोड़ने के लिए मिला। मेरा अनुमान है कि यह वैज्ञानिक नोटेशन पसंद नहीं है; लेकिन फिर गणना की शैली क्यों होगी?

Answer 1

यह एक आम समस्या है, इसी तरह की त्रुटियां क्रोम और अन्य विक्रेताओं के पुराने संस्करणों के साथ भी होती हैं।

सामान्य ठीक आंशिक रूप से, या तो रोटेशन कुछ करने के लिए की तरह 89.9deg या बल GPU रेंडरिंग रोटेशन के अलावा translateZ(1px) की तरह कुछ करने से बदलने के लिए हाशेम mentioned के रूप में, है। Demo। भविष्य में हम will-change संपत्ति

का उपयोग कर इस पर भी बल दे सकते हैं क्योंकि ऐसा इसलिए है क्योंकि ब्राउज़र को कुछ चीजों को प्रस्तुत करने में परेशानी होती है और 90 डिग्री घुमाए गए तत्वों को प्रतिपादित करना उन चीजों में से एक है। कभी-कभी उन्हें थोड़ी मदद की ज़रूरत होती है :)