4

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

Improve this question
5
  • 1
    I see the same behavior on Linux with the same version of Chrome you have on Mac.
    – Stephen Ostermiller ♦
    Dec 20 '20 at 10:30
  • Same behaviour on Windows Chrome 86
    – MrWhite
    Dec 20 '20 at 16:31
  • Aside: How do you open Chrome's DevTool (Web Inspector) for a page you open in another tab (or Window for that matter) - to actually observe the initial request?
    – MrWhite
    Dec 20 '20 at 17:24
  • Interesting. Even using "C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs (auto open Dev tools) it works fine in Chrome 87. But I see the same behavior when Chrome 87 if launched normally. Have to you looked at the console errors? FF and Chrome both show errors for GSAP and FF has one re cookies.misusing samesite attribute.
    – Trebor
    Dec 20 '20 at 17:32
  • I also see that after testing your update2, when you set the focus back on the original tab, your setInterval slows back down again. I would think that with modern multithreading/multicore processors, this wouldn't be nearly so noticeable.
    – Trebor
    Dec 26 '20 at 16:18
2
+50

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.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.