CSS关键帧我似乎无法移除工件

我使用关键帧将一个简单的缩放动画应用于一个圆

在Chrome版本85.0.4183.102（官方版本）（64位）中，有一条意外且不受欢迎的线与圆圈成比例，而不是在Firefox或Safari中

我无法移除它-你知道如何移除它吗？我尝试将border:0添加到各个div中，但未成功

#父项{溢出：隐藏；背景：#F0F4FF；高度：500px；宽度：100%；位置：相对；用户选择：无；边距块结束：5rem；z索引：3；}
.child{宽度：100%；高度：100%；}
内部{背景：径向梯度（中心圆，#D90368 20%，#F0F4FF 20%）}
.内部{位置：相对；左侧：0；顶部：0；动画：圆形2s线性无限；显示：块；高度：100%；宽度：100%；内容：；}
@关键帧圆{0%{transform:scale（0.5）}50%{transform:scale（1.2）}80%{transform:scale（0.95）}100%{transform:scale（1.0）}

---

我在Chrome上有一句话要说。所以我对代码进行了一些编辑，行就消失了。不确定问题是什么，只是一个不同的解决方案： html：

    <div id="parent">
      <div class="child">
        <div class="inner"></div>
      </div>
    </div>

---

代码片段中似乎没有任何一行？在渐变中，使最后20%的一行变为21%。。绝对不要在渐变中使用相等的值，始终是轻微的different@AmeyaRane谢谢你的评论，我已经在我的原始帖子中添加了一个line artefact的图像，并澄清它似乎是特定于浏览器的“Chrome”。@Temaniaff如果感谢你的评论，我试过你的建议，但它并没有解决我的困惑。当你试着运行问题中的代码片段时，你看到了同样的问题吗？我没有看到这个问题在Chrome上重现。

#parent {
  overflow: hidden;
  background: #f0f4ff;
  height: 500px;
  width: 100%;
  position: relative;
  user-select: none;
  margin-block-end: 5rem;
  z-index: 3;
}

.child {
  width: 100%;
  height: 100%;
  position: relative;
}

.inner {
    background-color: #d90368;
    width: 10rem;
    height: 10rem;
  position: absolute;
  left: calc(50% - 5rem);
  top: calc(50% - 5rem);
  animation: circle 2s linear infinite;
  display: block;
  content: " ";
  border-radius: 50%;
}

@keyframes circle {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}