Cursor keeps reset from `pointer` to `default` upon changing `document.title` on MacOS Firefox & Safari

I recently created a webpage, where there is a counter and a button.
The counter will +1 when the button is clicked, and the page title will also change according to the counter number.

I have a CSS that setting all buttons to have pointer as cursor on hovering, which working great:

button:hover {
  cursor: pointer;
}

However, when I change the page title accordingly:

function changeTitle() {
  document.title = count;
}

The cursor change from pointer to default, until it leave the button and re-enter it.

Let’s organize a bit:

On MacOS Firefox & Safari, when I:

Click a button -> Increment Counter -> Change document.title
The cursor change from pointer to default

Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    button:hover {
      cursor: pointer;
    }

    #plus-one {
      width: 10rem;
      height: 8rem;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div id="counter">0</div>
  <button type="button" id="plus-one">+1</button>
  
  <script>
    var count = 0;

    const counter = document.getElementById("counter");
    const btn = document.getElementById("plus-one");

    btn.addEventListener("click", () => {
      count++;
      counter.innerHTML = count;
      document.title = `Now is ${count}`;
    })
  </script>
</body>
</html>

Only on MacOS Firefox and Safari
It is good on MacOS Chrome, Windows Chrome and Windows Firefox.

What’s going on here?