Updating a element works in Chrome but not in Safari – Blancer.com Tutorials and projects

I’m trying to update a progress bar from within in async function. The following snippet of code works for me in Chrome but not in Safari:

<!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;
        await new Promise(resolve => setTimeout(resolve, 100)); // sleep for 0.1s
      }
    })();
  </script>
</body>

</html>

In chrome, the progress bar gets updated every 0.1s as expected.

In Safari, the progress bar doesn’t get updated (the loop executes, and we can even see that the value of progressBar is being updated by printing console.log(progressBar.value), but that change doesn’t get reflected in the UI).

I’m using an M1 Macbook Pro with Safari Version 16.4 (18615.1.26.11.23).