css - 变换旋转在 Chrome 中无法正常工作

Question

以下代码在 safari 中呈现了一个完美的旋转圆圈，但在 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/

它没有完美呈现，旋转一个大圆圈时问题很明显，就像 chrome 上的摆动圆圈。

谢谢你的帮助。

Answer 1

添加一个外部元素作为包装器并对其应用相同的样式，以屏蔽内圆旋转，如本 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%;
}