[see updates at bottom]
When I click on a to my website, it opens correctly in Google Chrome.
When I command-click the link, opening a new tab in the background, the page seems to load (correct favicon, loading bar etc.) but it's just a blank page in the new tab.
It's as though the browser is waiting for something before drawing the page, and the something never comes.
I am on macOS 11.1, using Google Chrome 87.0.4280.88.
I am trying to resolve this apparently trivial issue because several people have complained that Facebook links to our site open as a blank page.
[update 1]
The culprit seems to be a bug in Chrome caused by referencing window.Outerwidth in an unfocused window.
Minimal code to reproduce the problem:
<html><head><script>
document.documentElement.style.fontSize = (window.outerWidth/50) + 'px';
</script></head><body><p>
Hello World
</p></body></html>
Link to the page: files.svija.love/chrome.
- command-clicking on the above link in Chrome results in a blank page
- changing fontSize to other elements is still broken
- replacing document.documentElement.style.fontSize with a variable resolves the problem (but doesn't help me, because I need it)
[update 2]
Trebor's answer helped me come up with a different test that clarified the issue.
The following code can be visited at files.svija.love/chrome/test.html:
<html><head><script>
t = 0;
function updateTitle(){
t += 10;
document.title=t + ': ' + window.outerWidth;
}
x = window.setInterval(updateTitle, 10);
</script></head><body></body></html>
The script sets the page title to equal window.outerWidth.
You can command-click the link, then watch the value of outerWidth change in the adjacent tab title.
It is set to zero until the window is focused.
Interestingly, the setinterval function runs at approximately 1/10th speed until the window is focused, also.