Biến xoay không hoạt động bình thường trong chrome

Question

Mã sau đây hiển thị vòng tròn xoay hoàn hảo trong safari, nhưng không hoạt động trong 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/

Nó không làm cho hoàn hảo, vấn đề là có thể nhìn thấy khi xoay một vòng tròn lớn, nó giống như một vòng tròn xoáy trôn ốc trên chrome.

cảm ơn bạn đã trợ giúp.

Answer 1

Thêm một yếu tố bên ngoài như là một wrapper và áp dụng cùng kiểu định dạng với nó, để che dấu sự quay vòng tròn bên trong như đã thấy trong này 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%; 
}