mozilla中的右上角和左上角有毛躁

Question

我有一个锁定开口的小动画动画，可以悬停播放。锁的锁定很好，光滑，但在firefox中有奇怪的镂空。

Check out the animation jsFiddle here, and the isolated haft here

如果你用chrome和firefox打开它们，你可以看到我的意思。除非它当然是我的firefox版本，我不能在我所处的地方搞乱。我很想知道它就这么简单（我的版本是25.0）

如果我删除border-top-right-radius:45%; border-top-left-radius:45%;，那么它会再次平滑，但形状不正确。

代码可以在下面找到

---

HTML：

<div class="haft"></div>

的CSS：

.haft {
position:relative;
top:30px;
left:95px;
border:18px solid #D3D3D3;
display:block;
width:53px;
min-height:80px;
-webkit-border-radius:50%;
border-radius:50%;
border-top-right-radius:45%;
border-top-left-radius:45%;
border-bottom-color:transparent;
}

有人有任何建议吗？

提前致谢