Transformacja obracania nie działa poprawnie w chrome

Question

Poniższy kod renderuje idealny wirujący okrąg w safari, , ale nie w chromie.

<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/

To nie świadczy doskonale, problem jest widoczny podczas obracania duże koło, to jak koło wiercąc na chrom.

dziękuję za pomoc.

Answer 1

Dodawanie zewnętrzną elementu jako owinięcia i stosować tę samą stylistykę do niego, aby zamaskować wewnętrzny obrót koła jak widać w tym 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%; 
}