Vivaldi broken url bar, delayed location.hash

delayed location.hash breaks javascript page positioning, also breaks history.pushState() followed by window.history.back() executed immediately after loading document.

by rasz_pl

HTML

<div class="fuwari">
  <code>documentElement</code>: <span class="html-scrollTop"></span>
  <br />
  <code>body</code>: <span class="body-scrollTop"></span>
  <br />
  <code>scrollingElement</code>: <span class="scrolling-scrollTop"></span>
  <br /><button id="1">only location.hash</button>
  <br /><button id="2">only scrollTop</button>
  <br /><button id="3">location.hash + scrollTop</button>
  <br /><button id="4">location.replace + scrollTop</button>
</div>

<div id="middle">
  <code>middle</code>
</div>

CSS

html {
  height: 100%;
}
body {
  height: 2000px;
}
.fuwari {
  position: fixed;
  left: 300px;
}
#middle {
  position: absolute;
  top: 300px;
}

JavaScript

var elHtmlTop = document.querySelector('.html-scrollTop');
var elBodyTop = document.querySelector('.body-scrollTop');
var elScrollingTop = document.querySelector('.scrolling-scrollTop');

document.onscroll = updateTop;
updateTop();
history.scrollRestoration = 'manual'
location.hash = "middle"
//location.replace(location.href.replace(location.hash, "") + "#middle")
document.documentElement.scrollTop -= window.innerHeight / 2 - document.getElementById("middle").getBoundingClientRect().top - document.getElementById("middle").getBoundingClientRect().height / 2

//setTimeout(function() {document.documentElement.scrollTop -= window.innerHeight / 2 - document.getElementById("middle").getBoundingClientRect().top - document.getElementById("middle").getBoundingClientRect().height / 2}, 10);

function updateTop(event) {
  elHtmlTop.innerHTML = document.documentElement.scrollTop;
  elBodyTop.innerHTML = document.body.scrollTop;
  elScrollingTop.innerHTML = document.scrollingElement && document.scrollingElement.scrollTop;
}

document.getElementById("1").onclick = () => {
  location.hash = "middle"
}
document.getElementById("2").onclick = () => {
  document.documentElement.scrollTop -= window.innerHeight / 2 - document.getElementById("middle").getBoundingClientRect().top - document.getElementById("middle").getBoundingClientRect().height / 2
}
document.getElementById("3").onclick = () => {
  location.hash = "middle"
  document.documentElement.scrollTop -= window.innerHeight / 2 - document.getElementById("middle").getBoundingClientRect().top - document.getElementById("middle").getBoundingClientRect().height / 2
}
document.getElementById("4").onclick = () => {
  location.replace(location.href.replace(location.hash, "") + "#middle")
  document.documentElement.scrollTop -= window.innerHeight / 2 - document.getElementById("middle").getBoundingClientRect().top - document.getElementById("middle").getBoundingClientRect().height / 2
}