What's the window size of a background tab?

Whenever I open Twitter in a new tab on my phone, the page layout looks weird for a few seconds. It starts out looking like the desktop view and then, after a few seconds, it snaps back to the mobile view.

What's causing this?

Try opening this link to a window size detector in a background tab. Then visit that tab.

On Chrome, this is what I see.

If I hit the refresh button on that tab, the Outer window size snaps back:

What's going on?

According to the specification:

The outerWidth attribute must return the width of the client window. If there is no client window this attribute must return zero.

This is where I get confused. The inner width & height are the amount of space the the browser has to display web content - so ignores the browser bar, menu bars, window decorations etc. The outer width & height are the total amount of space the browser window has.

How can a browser window have no outer size, but simultaneously have an inner size???!?!

There is a client window. The tab may be rendering away in the background - but its parent still has a non-zero size.

There has been a bug report open on Chrome about this since 2017.

Firefox takes a different approach. On desktop, both outer and inner are reported correctly for background tabs. On mobile, both outer and inner dimensions are set to zero. This may change as it is a potential fingerprinting target.

So, web developers, please don't rely on window.innerHeight and window.outerHeight - users may be opening your site in the background, which causes the browser to lie to you.