Safari缩放致环形进度圈显示异常的修复方案咨询

你遇到的缩放时环形元素错位问题，根源在于CSS transform在非整数倍缩放时的像素对齐缺陷——浏览器会对变换后的元素进行栅格化处理，导致边缘错位重叠。下面提供两种稳定的替代方案，均能避免该问题，且兼容除Safari极老版本外的主流浏览器。

方案一：SVG矢量实现（推荐） #

SVG是矢量图形，缩放时会基于坐标重新渲染，完全不会出现像素错位问题，同时进度动画的实现逻辑清晰。

示例代码 #

<!-- viewBox确保SVG自适应任意缩放比例 -->
<svg viewBox="0 0 100 100" width="120" height="120">
  <!-- 灰色背景圆环 -->
  <circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="10" />
  <!-- 进度圆环：通过stroke-dasharray/offset控制填充长度 -->
  <circle id="progress-ring" cx="50" cy="50" r="45" fill="none" stroke="#2563eb" stroke-width="10"
          stroke-dasharray="282.74" stroke-dashoffset="282.74" transform="rotate(-90 50 50)" />
  <!-- 中心分数文本 -->
  <text x="50" y="55" text-anchor="middle" font-size="22" font-weight="600" fill="#333">7/10</text>
</svg>

<style>
#progress-ring {
  /* 从0到70%的进度动画 */
  animation: fill-progress 1.2s ease-out forwards;
}

@keyframes fill-progress {
  to {
    /* 计算方式：周长 × (1 - 进度占比)，这里7/10即30%未填充 */
    stroke-dashoffset: 84.82;
  }
}
</style>

关键说明 #

• viewBox="0 0 100 100" 定义SVG的坐标系统，确保无论父容器如何缩放，内部元素比例始终正确
• stroke-dasharray 值为圆环周长（2 × π × 半径，这里半径45，周长≈282.74），通过修改stroke-dashoffset控制显示的进度长度
• rotate(-90 50 50) 让进度从圆环顶部开始，符合常规视觉习惯
• 动画直接修改stroke-dashoffset，无需依赖transform，彻底避免缩放错位

方案二：CSS锥形渐变（conic-gradient）实现 #

利用CSS背景渐变实现进度填充，无需transform即可完成动画，缩放时背景会自动适配容器尺寸。

示例代码 #

<div class="score-circle">
  <span class="score-text">7/10</span>
</div>

<style>
.score-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  /* 初始状态：进度为0 */
  background: conic-gradient(#2563eb 0%, #2563eb 0%, #e0e0e0 0%, #e0e0e0 100%);
  animation: fill-conic 1.2s ease-out forwards;
}

/* 内部白色圆形，模拟圆环空心效果 */
.score-circle::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}

.score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 600;
  color: #333;
  z-index: 1;
}

@keyframes fill-conic {
  to {
    /* 最终状态：70%进度填充 */
    background: conic-gradient(#2563eb 0%, #2563eb 70%, #e0e0e0 70%, #e0e0e0 100%);
  }
}
</style>

关键说明 #

• conic-gradient 直接绘制扇形填充区域，通过动画修改渐变百分比实现进度动画
• 伪元素::before 创建内部空心圆，避免额外嵌套元素
• 无需使用transform旋转或位移进度元素，从根源解决缩放错位问题

为什么原transform方案会出错？ #

当使用CSS transform（如rotate、scale）时，浏览器会先将元素栅格化为位图，再进行变换。非整数倍缩放时，位图的像素边缘无法精确对齐，就会出现错位或重叠。而上述两种方案均基于矢量或CSS背景渲染，缩放时会实时重新计算布局，完全避免该问题。

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