Trasforma la rotazione non funziona correttamente in chrome

Question

Il seguente codice rappresenta un cerchio di rotazione perfetto in safari, ma non in chrome.

<style> 
.circle{ 
    height:1000px; 
    width:1000px; 
    background-color:#000; 
    border-radius: 50%; 
} 

@-webkit-keyframes rotating { 
from{ 
    -webkit-transform: rotate(0deg); 
} 
to{ 
    -webkit-transform: rotate(360deg); 
} 
} 

.rotating { 
    -webkit-animation: rotating 2s linear infinite; 
    -webkit-transform-origin: center; 
} 
</style> 

<div class="circle rotating"> 
</div> 

http://jsfiddle.net/p4ban9cs/

Non rende perfettamente, il problema è visibile quando la rotazione di un grande cerchio, è come un cerchio dimenando su Chrome.

Grazie per l'aiuto.

Answer 1

Aggiunta di un elemento esterno come un involucro e applicare stesso stile ad esso, per mascherare la rotazione interna cerchio come mostrato in questo Fiddle

<div class="overlay"> 
    <div class="circle rotating">Test</div> 
</div> 

.overlay{ 
    height:1000px; 
    width:1000px; 
    box-shadow:0 0 0 10px #000 ; 
    background:black; 
    border-radius: 50%; 
}