iOS Safari不支持对::-webkit-progress-value的width属性做CSS过渡，仅稳定支持background-color动画，且需显式设置progress容器和伪元素的background-color（如progress{background-color:#f0f0f0;}与progress::-webkit-progress-value{background-color:#007BFF;transition:background-color 0.3s ease;}），否则过渡静默失败。
为什么直接给 progress 写 transition: width 在 iOS 上失效
iOS Safari（截至 iOS 17.5）不支持对 ::-webkit-progress-value 的 width 属性做 CSS 过渡。它只稳定支持 background-color 动画，且前提是：必须显式设置 progress 容器的 background-color（哪怕设为 transparent），否则伪元素没有“起始状态”可比，整个过渡静默失败。
常见错误写法：progress::-webkit-progress-value { transition: width 0.3s ease; } → 真机无动画
正确写法：progress { background-color: #f0f0f0; }progress::-webkit-progress-value { background-color: #007BFF; transition: background-color 0.3s ease; }
用 CSS 变量 + width 过渡实现 JS 可控平滑增长
把进度值抽成 --progress 变量，再用 width 映射它，比直接操作 style.width 更利于维护，也避免频繁重排。JS 更新只需改变量，不 touch DOM 宽度。
- HTML 中用
<progress value="0" max="100">保持语义 - CSS 里用
.progress-bar { width: calc(var(--progress, 0) * 1%); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } - JS 更新时只调
element.style.setProperty('--progress', newValue)，不设element.value - 务必加
will-change: width提前告知浏览器要动画该属性，尤其在 position: sticky 或滚动容器中
移动端滚动时进度条卡顿或跳变的根本原因
不是 CSS 写错了，而是触发时机没对齐：scroll/touchmove 里实时更新变量会触发高频率重排，iOS Safari 会降级 transition 优先级，导致动画卡顿或暂停。
立即学习“前端免费学习笔记（深入）”；
- 禁用
overflow: hidden的父容器滚动条动画（iOS Safari 强制同步渲染） - 不要在
scroll回调里读取document.body.scrollHeight—— 缓存它，仅在resize或 DOM 变化时重算 - 用
requestAnimationFrame节流更新变量，而不是直接在事件里赋值 - 监听
visibilitychange：用户切后台后变量中断更新，进度条可能卡在中间不动，需手动补一帧或重置--progress
真机测试最容易被忽略的兼容性细节
Chrome for Android 和 iOS Safari 对伪元素动画的支持逻辑不同，光看开发工具预览会漏掉关键问题。
- Firefox 需单独写
progress::-moz-progress-bar，且只支持background-color过渡，width无效 - 某些安卓 WebView（如旧版 UC）不识别
appearance: none，需加-webkit-appearance: none - 如果进度条嵌在
transform或flex容器里，width动画可能错位 —— 改用background-size+background-position更稳 - 测试时打开 Chrome DevTools 的 “Rendering > Paint flashing”，确认
.progress-bar没有每帧重绘
真正平滑的关键不在加多少 transition，而在让浏览器明确知道“动什么、从哪来、到哪去”，并避开移动端 repaint 阻塞和伪元素失效路径。变量驱动 + 节流更新 + 真机验证，三者缺一不可。
