FiveM服务器速度表CSS闪烁问题求助

我为FiveM服务器制作了一款基于jQuery的速度表，整体功能正常，但车辆速度达到速度表50%刻度时，进度条会出现闪烁问题。我知道这是半圆环处于50%可见状态时的渲染冲突导致的，求解决办法。

.box-float{
    position: relative;
    right: 5vh;
    top: 34vh;
}

.box {
  --v: calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  width: 180px;
  height: 180px;
  transform: rotate(160deg);
  border-radius: 50%;
  padding: 25px;
  background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.box2 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  width:170px;
  left: 0.4vh;
  top: 5;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

.box3 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  left: 0.4vh;
  top: 5;
  width:170px;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

<div class="box-float relative">
      <div class="box-tekstic absolute font-bold"><a class="text-gray-400">0</a>85</div>
      <a class="box-tekstic2 absolute font-semibold text-gray-400">KM/H</a>
      <div class="box absolute" style="--p:68;"></div>
      <div class="box2 absolute" style="--p:68;"></div>
      <div class="box3 absolute"></div>
</div>

闪烁的核心原因是当--p等于50时，(var(--p)-50)和(50-var(--p))都会变成0，导致背景和遮罩的min(100%, 0*100%)计算出0宽度，触发浏览器渲染的边界冲突。以下两种方法可解决问题：

方法1：给临界值添加微小偏移 #

给涉及50的计算添加一个极小的数值，避免刚好等于0的情况。修改每个.box类的背景和遮罩计算：

.box {
  --v: calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  width: 180px;
  height: 180px;
  transform: rotate(160deg);
  border-radius: 50%;
  padding: 25px;
  /* 给(var(--p)-50)添加0.001避免等于0 */
  background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50 + 0.001)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0);
  /* 给(50-var(--p))添加0.001避免等于0 */
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p) + 0.001)*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.box2 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  width:170px;
  left: 0.4vh;
  top: 5;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50 + 0.001)*100%), linear-gradient(to right, transparent 50%, #8a8989 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p) + 0.001)*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

.box3 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  left: 0.4vh;
  top: 5;
  width:170px;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50 + 0.001)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p) + 0.001)*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

这个方法通过给计算值加0.001，让--p=50时，(var(--p)-50+0.001)=0.001，(50-var(--p)+0.001)=0.001，避免了宽度为0的情况，浏览器不会触发渲染冲突，闪烁问题就会消失。

方法2：重构半圆环渲染逻辑 #

如果不想用偏移量，可以改用conic-gradient（锥形渐变）+径向遮罩实现圆环进度，避免双渐变的边界冲突，代码更简洁：

.box {
  --v: calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  width: 180px;
  height: 180px;
  transform: rotate(160deg);
  border-radius: 50%;
  padding: 25px;
  /* 用锥形渐变实现进度 */
  background: conic-gradient(from var(--v), #4c4c4e 0deg, transparent 0deg);
  /* 径向遮罩裁剪出圆环形状 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 25px), #fff calc(50% - 25px + 1px));
  mask: radial-gradient(farthest-side, transparent calc(50% - 25px), #fff calc(50% - 25px + 1px));
}

.box2 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  width:170px;
  left: 0.4vh;
  top: 5;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background: conic-gradient(from var(--v), #8a8989 0deg, transparent 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 12px), #fff calc(50% - 12px + 1px));
  mask: radial-gradient(farthest-side, transparent calc(50% - 12px), #fff calc(50% - 12px + 1px));
}

.box3 {
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  left: 0.4vh;
  top: 5;
  width:170px;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background: conic-gradient(from var(--v), #b7ff00 0deg, transparent 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 12px), #fff calc(50% - 12px + 1px));
  mask: radial-gradient(farthest-side, transparent calc(50% - 12px), #fff calc(50% - 12px + 1px));
}

这种方式用单一渐变实现进度，没有双渐变的边界计算，自然不会出现50%时的闪烁问题，同时维护性更好。

内容的提问来源于Stack Exchange，提问作者whereiam