Rotation transformation does not work properly in chrome state

Question

The following code displays a perfect spinning circle in a safari , but not 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/

This does not do well, the problem is visible when turning a large circle, it's like a circle on chrome.

Thank you for your help.

Answer 1

Adding an outer element as a wrapper and applying the same style to it to mask the rotation of the inner circle, as shown in this 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%; }