Chrome bug: headless window not rendered (new tab in background) if outerWidth is referenced

Question

[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.

Trebor · Accepted Answer · 2020-12-26T03:19:27.397

The problem appears to be that the window.outerwidth value isn't defined until after the new window is drawn. Further, it appears that your script is executing before the new Window object is fully "initialized", at least in Chrome.

Try this test:

<html><head><script>
   document.documentElement.style.fontSize = (window.outerWidth/50) + 'px';
    alert('The value of window.outerWidth/50 is: ' + (window.outerWidth) + 'px');
    setTimeout(checkSizeAgain,5000);
function checkSizeAgain() {
       alert('The value of window.outerwidth after delay is: ' + (window.outerWidth) + 'px');
       document.documentElement.style.fontSize = (window.outerWidth/50) + 'px';
    }



</script></head><body><p>
   Hello World
</p></body></html>

When you click normally and the current page is redirected, the value displayed is correct because the window object was already drawn by the previous URL (you haven't left the tab that contains a fully initialized Window object).

However, when you Ctrl+Click the value is shown to be zero because you're launching a new tab and the Window object doesn't have an outerwidth property yet. However, after just 5 second delay, the size is correct.

It seems odd that Chrome would let you execute your script prior to the window object being fully initialized, but it appears to be the case.

As you mentioned, the problem only appears to occur in Chrome.

Chrome bug: headless window not rendered (new tab in background) if outerWidth is referenced

1 Answers1