'Why history on chrome not working when added a new state?

I have pushed some states into browser but when I clicking on the back button browser it can not navigate to previous state. Although, I clicked and hold on the back button and saw all states was added before.

Then I try this code on the safari. It works well

I made me confusing about the Chrome browser.

My expected on Chrome, Safari

After adding these state into history.

Click back button -> go to intro.html -> Click back button one more time -> got to index.html

Please help me explain more about it and help me fixing it for Chrome brower.

Thank you

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <script type="text/javascript">
      window.onload = function () {
        history.pushState(null, null, "/index.html");
        history.pushState(null, null, "/intro.html");
        history.pushState(null, null, "/products/index.html");
      };
    </script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Why history on chrome not working when added a new state?

Sources

Related Questions