Chrome, css geçişini kullanırken siyah ekranı yanıp söner

Question

Geçiş dönüşü, kromun flaş siyah ekranına neden olmasına neden olur. Bu bir Chrome hatası mı (Safari'de iyi çalışıyor) veya bazı akıllı css ile düzeltilebilir.

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>

Örnek fiddle here.

Bu sorunla ilgili sorun, her defasında oluşmaması ve gri kareyi birkaç kez ayarlamanız ve ekranın siyah renkte yanıp sönmesi gerektiğini görmenizdir.

test edilmiştir:
Chrome 16.0.912.75
Krom Kanarya 18.0.1010.0

İşleri ince tarih:
Safari 5.1.2 (6534.52.7)

Snow Leopard

üzerine Tüm test

Answer 1

Dönüştürülmüş öğenin üst öğesine -webkit-transform: translate3D(0, 0, 0) vererek kompozisyonu sabitlemeye zorlayarak bunu düzeltebilirsiniz.

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>

Kontrol dışarı keman: http://jsfiddle.net/UHLFF/