在Google Chrome浏览器中运行CSS动画时边框半径断裂

问题描述

这是我正在播放的CSS动画：

#mydiv{
  width: 700px;
  height: 100px;
  border-radius: 50px;
  background-color: rgb(20,20,20);
  position: relative;
  overflow: hidden;
  top: 50px;
}

#mydiv:before{
  content: "";
  width: 20%;
  height: 100px;
  border-radius: 50px;
  background-color: rgb(255,174,0);
  position: absolute;
  overflow: hidden;
  animation: loading 2s infinite;
}

@keyframes loading{
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(500%);
  }
}

<div id="mydiv">
</div>

它应该显示黄色部分，该部分的圆角在黑色div内从左到右移动。但是，这就是我在Google Chrome浏览器中看到的样子：

gif

您可以清楚地注意到，黄色部分的右侧在整个动画中不是圆形的，而是破裂的。我在我的PC上的Firefox和Edge以及另一台PC的Chrome上测试了此动画，并且在这些浏览器中显示时没有任何错误。我仅在PC的Chrome中遇到此问题。当我尝试拍摄黄色部分的断开的边框半径的屏幕截图时，它在屏幕截图中正确显示。然后我录制了屏幕，当我播放录制的视频时，动画在那里也看上去很完美，我不知道为什么。因此，我不得不将其记录在手机中，将其转换为gif并发布到此处。

我的Google Chrome浏览器出现这种行为的原因可能是什么？解决办法是什么？

UPD1 ：我正在使用chrome开发工具调查此问题，并注意到启用Paint Flashing后该错误会立即消失，如果禁用它，该错误会再次出现。

UPD1 ： >

UPD2 ：当我在chrome开发工具中检查该页面的任何内容时，该错误也消失了，当我停止检查时，该错误再次出现。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animation animation border-radius google-chrome