title: changing window.location.hash creates entry in history but doesn't affect chrome back button
body: <p><strong>Update :-</strong> As <code>Akansh Gulati</code> Pointed out in his answer if user have any interaction with the page before clicking back button this will work as expected and if user do not have any interaction with the page and press back button then any entry in history ( either by hash-change or by history.push/replace ) will be ignored which is part of <a href="https://chromium-review.googlesource.com/c/chromium/src/+/1344199" rel="nofollow noreferrer">Google Chrome update will stop websites hijacking your browser back button</a></p>
  <p>This is valid and logical answer so I am accepting his answer</p>
  <hr />
  <p>I am trying to show a success popup after page load and if user press android back button ( which is in this case equivalent to browser back button ) I only want to close the popup ( don't want to redirect back on payment page )</p>
  <p>I am adding hash in url when popup is open but when user press back button chrome ignore the hash and redirect back on previous page instead of just removing the hash ( working fine in Firefox )</p>
  <p><s>I have a working example <a href="https://www.tripurari.in" rel="nofollow noreferrer">here</a></s> use following HTML code to reproduce</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
    &lt;/head&gt;
    &lt;body onload="test()"&gt;
      &lt;button type="button" onclick="window.history.back();"&gt;Back&lt;/button&gt;
    &lt;/body&gt;
    &lt;script type="text/javascript"&gt;
      function writeLength() {
        document.body.appendChild(document.createTextNode(window.history.length));
      }
  
      function test() {
        window.location.hash = 'a';
        setTimeout(function() {
          writeLength();
          window.location.hash = 'b';
          setTimeout(function() {
            writeLength();
            window.location.hash = 'c';
            setTimeout(function() {
              writeLength();
            }, 1500);
          }, 1500);
        }, 1500);
      }
    &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>a) open this page in chrome</p>
  <p>b) wait till hash is changed to '#c'</p>
  <p>c) then press browser back button</p>
  <p>expected behavior is it should change the hash back to '#b' and then back to '#a'
  but it ignore all the hash changes and redirect back to new-tab page</p>
  <p>This is the <a href="https://github.com/tripurari001/tripurari001/blob/f8e84e47972ff61129710b93dbe87a77e01af415/index.html#L15-L26" rel="nofollow noreferrer">code</a></p>
  <pre><code>      window.location.hash = 'a';
        setTimeout(function() {
          writeLength();
          window.location.hash = 'b';
          setTimeout(function() {
            writeLength();
            window.location.hash = 'c';
            setTimeout(function() {
              writeLength();
            }, 1500);
          }, 1500);
        }, 1500);
  </code></pre>
  <p>how can I simulate the correct behavior (if there is any way) ?</p>
  <p>I am using chrome Version 77.0.3865.90 (Official Build) (64-bit) on Mac</p>
  <p>here is a GIF image of behavior</p>
  <p><a href="https://i.stack.imgur.com/B0w5w.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B0w5w.gif" alt="actual behavior GIF image" /></a></p>