रोटेशन के दौरान क्रोम 21 स्केलिंग तत्व

Question

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

मैं जावास्क्रिप्ट का उपयोग करके तत्व के घूर्णन को बदल रहा हूं, और रोटेशन को एनिमेट करने के लिए वेबकिट संक्रमण का उपयोग कर रहा हूं। कभी-कभी, प्रारंभ और अंत रोटेशन के आधार पर, तत्व रोटेशन के साथ यादृच्छिक रूप से स्केल करता है। मैंने यहां एक डेमो बनाया है: http://jsfiddle.net/XCwUQ/ (शरीर पर क्लिक करें)।

क्या किसी को पता है कि यह क्यों हो रहा है?

चीयर्स,

ईसाई

Answer 1

अद्यतन: 23 (मूल प्रश्न पर @joequincy टिप्पणी देखें)

---

दरअसल क्रोम में अब तय हो रहा है, इस तरह लगता है एक दोष। जब तक यह तय हो गई है, तो आप jQuery animate() समारोह इस तरह के साथ काम कर सकते हैं:

$(function() { 
    var rotation = 163; 
    $('body').on('click', function() { 
     rotation = (rotation == 163) ? 198 : 163;    
     $('#wheel').animate({ 
      borderSpacing: rotation 
     }, { 
      step: function(now, fx) { 
       $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-moz-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-ms-transform', 'rotate(' + now + 'deg)');  
       $(this).css('-o-transform', 'rotate(' + now + 'deg)');  
       $(this).css('transform', 'rotate(' + now + 'deg)');  
      } 
     });   
    }); 
});​ 

transition सीएसएस बयान निकालें और जोड़ें:

border-spacing: 163px; 

यह उदाहरण दुरुपयोग border-spacing विशेषता है, क्योंकि यह जीत लिया ' ज्यादातर मामलों में आपके लेआउट को प्रभावित नहीं करते हैं।

देखें http://jsfiddle.net/hongaar/wLTLK/1/

(इस उत्तर के लिए धन्यवाद: Animate element transform rotate)

नोट: आप वैकल्पिक रूप से और jQuery का उपयोग कर सकते animate() वाक्य रचना का एक सरल संस्करण के लिए बदलने प्लगइन बदसूरत कई css() कॉल निकालने के (लेकिन ओवरहेड जोड़ना)। https://github.com/louisremi/jquery.transform.js