<progress>元素更新在Chrome生效但Safari无UI反馈的问题

问题现象 #

Chrome中进度条每0.1秒按预期逐步更新；Safari中progressBar.value已通过代码正常修改（可通过console.log验证），但进度条的UI无任何变化，循环执行逻辑正常。

原因分析 #

Safari的渲染引擎在处理异步任务中的DOM更新时，可能会延迟合并渲染操作，或者setTimeout的回调时机未让渲染线程优先处理DOM变更，导致UI无法及时响应数值变化。

解决方案 #

方案1：用requestAnimationFrame同步渲染周期 #

将DOM更新操作绑定到浏览器的渲染队列，确保变更在下次重绘前执行：

<!DOCTYPE html>
<html>

<body>
  <progress id="progressBar" value="40" max="100"></progress>
  <script>
    (async () => {
      const progressBar = document.getElementById("progressBar");
      for (let i = 0; i <= 100; i++) {
        await new Promise(resolve => {
          requestAnimationFrame(() => {
            progressBar.value = i;
            setTimeout(resolve, 100);
          });
        });
      }
    })();
  </script>
</body>

</html>

方案2：强制触发重绘 #

在更新数值后读取元素的布局属性，强制浏览器立即计算布局并触发重绘：

<!DOCTYPE html>
<html>

<body>
  <progress id="progressBar" value="40" max="100"></progress>
  <script>
    (async () => {
      const progressBar = document.getElementById("progressBar");
      for (let i = 0; i <= 100; i++) {
        progressBar.value = i;
        // 读取offsetHeight强制触发重绘
        progressBar.offsetHeight;
        await new Promise(resolve => setTimeout(resolve, 100));
      }
    })();
  </script>
</body>

</html>

原理说明 #

• requestAnimationFrame会将回调函数加入浏览器的渲染队列，让DOM更新操作与浏览器的刷新频率同步，避免渲染延迟。
• 读取offsetHeight这类布局属性时，浏览器会立即计算元素的当前布局状态，强制触发重绘，从而让进度条的数值变化即时显示在UI上。

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