含逗号的CSS自定义属性在iOS失效，如何修复进度条颜色问题？

你的问题根源在于iOS的WebKit内核对CSS自定义属性中逗号分隔的多层渐变表达式解析存在兼容性Bug——它会错误地将渐变内部的逗号识别为自定义属性值的分隔符，导致--color变量解析失败，进度条颜色显示异常。

以下是几种可靠的解决方法：

方法1：拆分自定义属性，避免单变量包含多逗号渐变 #

将原来集中在--color里的多层渐变拆分为独立的自定义属性，然后在background属性中直接组合，让浏览器正确识别每个渐变的边界：

progress[value] {
  --w: 10em; /* 进度条宽度 */
  --color-red: linear-gradient(red 0 0) 0 /calc(var(--w)*.3 - 100%) 1px;
  --color-orange: linear-gradient(orange 0 0) 0 /calc(var(--w)*.6 - 100%) 1px;
  --color-green: green;
  --background: lightgrey; /* 背景色 */

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: var(--w);
  margin: 0 10px;
  background: var(--background);
  -webkit-mask:
   radial-gradient(circle closest-side,#000 98%,#0000 102%) 0/12.5% 100%,
   linear-gradient(90deg,#000 50%, #0000 0) 8%/25% 100%
}
progress[value]::-webkit-progress-bar {
  background: var(--background);
}
progress[value]::-webkit-progress-value {
  /* 直接组合拆分后的渐变变量 */
  background: var(--color-red), var(--color-orange), var(--color-green);
}
progress[value]::-moz-progress-bar {
  background: var(--color-red), var(--color-orange), var(--color-green);
}

label {
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin: 20px 0;
}

这种方法完全保留了你原来的渐变逻辑，只是通过拆分变量避免了逗号解析冲突，兼容性最好。

方法2：改用动态颜色计算替代多层渐变 #

如果不需要保留原有的渐变叠加逻辑，可以直接通过calc结合HSL颜色模型，根据进度值动态计算颜色，彻底避免逗号问题：

progress[value] {
  --w: 10em;
  --progress: calc(var(--value, 0) / 100); /* 同步进度值到CSS变量 */
  /* 根据进度动态计算色调：<30%红，30%-60%橙，>60%绿 */
  --color: hsl(calc((var(--progress) - 0.3) * 120), 100%, 50%);
  --background: lightgrey;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: var(--w);
  margin: 0 10px;
  background: var(--background);
  -webkit-mask:
   radial-gradient(circle closest-side,#000 98%,#0000 102%) 0/12.5% 100%,
   linear-gradient(90deg,#000 50%, #0000 0) 8%/25% 100%
}
progress[value]::-webkit-progress-bar {
  background: var(--background);
}
progress[value]::-webkit-progress-value {
  background: var(--color);
}
progress[value]::-moz-progress-bar {
  background: var(--color);
}

label {
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin: 20px 0;
}

对应的HTML需要给每个progress元素添加style属性同步进度值：

<label> label: <progress max="100" value="10" style="--value:10">10%</progress></label>
<label> label: <progress max="100" value="40" style="--value:40">40%</progress></label>
<label> label: <progress max="100" value="80" style="--value:80">80%</progress></label>
<label> label: <progress max="100" value="100" style="--value:100">100%</progress></label>

这种方法代码更简洁，性能也更好，适合不需要复杂渐变效果的场景。

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