HTML / CSS：Chrome上的饼图像素错误

Question

我想开发一个循环进度条，所以我开始创建一个带有html / css的饼图，并使这段代码正常工作。我只是在一段时间内发生了一些渲染问题。这是我在我的开发网站（img）上得到的，我也粘贴了我的代码。这里的结果是完美的，这很奇怪，因为我使用相同的浏览器来检查结果。 Firefox上的结果非常适合（dev网站和堆栈结果）

当饼图的值大于50％时，我通过删除应用于.half-left元素的“overflow：hidden”来解决问题，但是如果它从25％变为75％例如

.radial-progress {
  width: 120px;
  height: 120px;
  background-color: #d6dadc;
  border-radius: 50%;
  position: relative;
  overflow: hidden
}

.radial-progress .half-right,
.radial-progress .half-left {
  transition: all 1s;
  height: 200%;
  width: 200%;
  top: -50%;
  position: absolute;
  overflow: hidden;
  left: 50%;
  transform-origin: 0 50%;
  transform: rotate(0deg)
}

.radial-progress .half-right .fill,
.radial-progress .half-left .fill {
  transition: all 1s;
  height: 200%;
  width: 200%;
  top: -50%;
  right: 100%;
  position: absolute;
  transform-origin: 100% 50%;
  background-color: rebeccapurple
}

<div class="radial-progress" ng-reflect-set-value="99">

  <div class="half-right">
    <div class="fill" style="transform: rotate(112deg);"></div>
    <div class="fill" style="transform: rotate(224deg);"></div>
  </div>
  <div class="half-left rotated" style="transform: rotate(112deg);">
    <div class="fill" style="transform: rotate(112deg);"></div>
  </div>
  </div>