सीएसएस संक्रमण घुमाने का उपयोग करते समय क्रोम ब्लैक स्क्रीन चमकती है

Question

संक्रमण घुमाव क्रोम को ब्लैक स्क्रीन फ्लैश करने का कारण बनता है। क्या यह क्रोम बग है (सफारी में ठीक काम करता है) या इसे कुछ चालाक सीएसएस के साथ तय किया जा सकता है।

div { 
 
    width:200px; 
 
    height:200px; 
 
    position:relative; 
 
    background:#ddd; 
 
} 
 

 
span { 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:40px; 
 
    left:40px; 
 
    width:20px; 
 
    background:#007; 
 
    height:10px; 
 
    -webkit-transition: all .5s; 
 
} 
 

 
div:hover > span { 
 
    -webkit-transform: rotate(180deg); 
 
}

<div> 
 
    <span></span> 
 
</div>

उदाहरण fiddle here।

इस समस्या के साथ समस्या यह है कि यह हर बार नहीं होता है इसलिए आपको कई बार ग्रे स्क्वायर होवर करना होगा और आपको स्क्रीन में ब्लिंकिंग स्क्रीन देखना चाहिए।

में परीक्षण किया गया:
क्रोम 16.0.912.75
Chrome कैनरी 18.0.1010.0

वर्क्स ठीक पर:
सफारी 5.1.2 (6534.52.7)

Snow Leopard

पर सभी परीक्षण

Answer 1

आप परिवर्तित किए गए तत्व के माता-पिता को -webkit-transform: translate3D(0, 0, 0) देकर कंपोजिटिंग को मजबूर कर इसे ठीक कर सकते हैं।

div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)} 
 
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; } 
 
div:hover > span { -webkit-transform: rotate(180deg); }

<div> 
 
    <span></span> 
 
</div>

चेक बाहर बेला: http://jsfiddle.net/UHLFF/