如何设计适配所有浏览器缩放级别的像素完美进度环？

我的问题并非出在进度环（progress ring）本身，你可以查看附带的代码片段示例。它能按预期工作，完全符合我的需求，但无法适配所有浏览器缩放级别。在某些缩放级别下，内圈尺寸和/或进度环与内圈的间距无法达到像素完美，能清楚看到特定浏览器缩放级别下，进度环与内圈的间距变小。

问题演示动图：

请问是否有办法在所有浏览器中修复此问题？

CSS代码 #

:root {
  --ring-size: 26px;
  --border-width: 2px;
  --progress: 75%;
  --gap-size: 1px;
}

html {
  font-size: 16px;
}

.progressRing {
  width: var(--ring-size);
  height: var(--ring-size);
  background: conic-gradient(red var(--progress), lightgray 0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progressRing::before {
  content: "";
  width: calc(100% - var(--border-width) * 2);
  height: calc(100% - var(--border-width) * 2);
  margin: auto;
  background: white;
  border-radius: 50%;
  position: absolute;
}

.innerCircle {
  width: calc(100% - var(--border-width) * 2 - var(--gap-size) * 2);
  height: calc(100% - var(--border-width) * 2 - var(--gap-size) * 2);
  background-color: gray;
  border-radius: 50%;
  z-index: 1;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Progress Ring</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="progressRing">
    <div class="innerCircle"></div>
  </div>
</body>

</html>

这个问题本质是浏览器缩放时的亚像素渲染精度问题，以下几种方法可以解决：

• 改用固定尺寸计算：避免嵌套百分比计算带来的亚像素偏差，直接基于根变量的固定值推导各元素尺寸，减少计算层级：

:root {
  --ring-size: 26px;
  --border-width: 2px;
  --progress: 75%;
  --gap-size: 1px;
  --white-circle-size: calc(var(--ring-size) - var(--border-width)*2);
  --inner-circle-size: calc(var(--white-circle-size) - var(--gap-size)*2);
}

.progressRing {
  width: var(--ring-size);
  height: var(--ring-size);
  background: conic-gradient(red var(--progress), lightgray 0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.progressRing::before {
  content: "";
  width: var(--white-circle-size);
  height: var(--white-circle-size);
  background: white;
  border-radius: 50%;
  position: absolute;
}

.innerCircle {
  width: var(--inner-circle-size);
  height: var(--inner-circle-size);
  background-color: gray;
  border-radius: 50%;
  z-index: 1;
}

• 优化渲染精度：添加CSS属性触发硬件加速或强制像素对齐，减少亚像素模糊：

.progressRing, .progressRing::before, .innerCircle {
  image-rendering: crisp-edges;
  transform: translateZ(0);
}

• 替换为SVG实现：SVG是矢量图形，缩放时不会出现像素偏差，完全规避亚像素问题，示例如下：

<svg width="26" height="26" viewBox="0 0 26 26">
  <!-- 灰色背景环 -->
  <circle cx="13" cy="13" r="10" fill="lightgray" />
  <!-- 红色进度环（75%进度） -->
  <circle cx="13" cy="13" r="10" fill="none" stroke="red" stroke-width="2" stroke-dasharray="62.83" stroke-dashoffset="15.71" transform="rotate(-90 13 13)" />
  <!-- 白色间隔环 -->
  <circle cx="13" cy="13" r="9" fill="white" />
  <!-- 灰色内圈 -->
  <circle cx="13" cy="13" r="8" fill="gray" />
</svg>

注：stroke-dasharray和stroke-dashoffset基于圆周长计算：2πr≈62.83，75%进度对应偏移量为62.83*(1-0.75)=15.71

内容的提问来源于stack exchange，提问作者rfgamaral