Content is not sized correctly for the viewport

[sarahannnicholson]

Description

I ran a Lighthouse audit on my site and on the Gatsby site. I noticed the same note appearing in the "Progressive Web App" section. Content is not oversized for the viewport.

Steps to reproduce

1. Go to the Gatsby website https://www.gatsbyjs.org/docs/
2. Open the chrome dev tools
3. Run a Lighthouse audit.
4. Notice "Content is not sized correctly for the viewport" in the progressive web app section

Expected result

Viewport size shouldn't appear in the Lighthouse audit

Actual result

Notice "Content is not sized correctly for the viewport" in the progressive web app section

Investigation

The Lighthouse audit docs state The audit passes if window.innerWidth === window.outerWidth. docs I went into the source of the Gatbsy site in the dev tools and put a breakpoint in the layout.js on line 63 let isModal = false When i refreshed the page, my breakpoint was hit. In the console I was able to type window.innerWidth and window.outerWidth

Moving to the HTML tab (with my breakpoint still hit), you can see that none of the page content has loaded yet. So the problem isn't my website or the Gatsby website is doing, content wise.

[pieh]

@fk Any clues? I'm not really familiar with gatsbyjs.org code so not even sure where to look

[fk]

No clues yet, but will take a look! 🔍

Thanks so much @sarahannnicholson for my "today I learned" 🙏 — I have to admit I never ever saw "Content is not sized correctly for the viewport" anywhere yet. Apparently it's been some time since I did a Lighthouse audit on www. :-/

Also 👍🙏 for the super detailed issue description and investigation!

[fk]

Ah, hold on. Clearly not able to … read … today/night anymore. :/

I ran a Lighthouse audit on my site and on the Gatsby site. I noticed the same note appearing in the "Progressive Web App" section. Content is not oversized for the viewport.

Do I understand this correctly and you are seeing the same warning for your website, too?

(I first thought "OK, it's that modal and how it renders", which doesn't make much sense if @sarahannnicholson's website doesn't contain one… 🤦‍♂️🤓)

[sarahannnicholson]

Hey @fk Im glad to have been some help!

Yes I am seeing it on my website as well as the Gatsby website. Which makes me believe its a Gatsby issue. So to test that theory I added a breakpoint in the layout.js before the content had loaded, but after window had been initialized. That way I could test and confirm that the window.innerWidth and window.outerWidth were in fact not the same, and that the issue is somewhere in Gatsby's init.

[fk]

Whoa that was fast @sarahannnicholson! Thanks for the clarification/validating that I can still read/process if I take a little more time. ;-)

Im glad to have been some help!

💯!

Hmmmm. (My guts) Thinking out loud — maybe it's something that happens in relation to reach router handling focus?

[fk]

Hey @sarahannnicholson — I tried to reproduce your findings but fail to do so. Screenshot is taken at ~1600px viewport width though:

Am I missing something? @pieh did you try reproducing?

Edit: Here's the Lighthouse settings I tested with:

[pieh]

I didn't check it yet - I don't really understand how/why window.innerWidth and window.outerWidth would not match :)

[sarahannnicholson]

@fk I ran it again to double check :/ got the same

Audit settings

Device: Desktop Audits: All Throttling: Simulated Fast 3G, 4x CPU Slowdown Clear storage: checked

[craftedsystems]

Lighthouse 3.0.3 (Chrome Stable 70.0.3538.77) seems to have the following bug: When you dock the Dev Tools to the right, you get the false viewport width alert. Detaching or docking the Dev Tools to the bottom solves this for me.

Desktop or mobile does not matter because the PWA test will always test for mobile-friendy.

[GuskiS]

Just noticed this in my page. Weirdly that it happens only when gatsby build && gatsby serve, cause when I'm doing gatsby develop everything is fine. I also noticed that when I turn on mobile view within chrome, I can scroll x/y, however if I do manual screen resize everything is fine.

[GuskiS]

Ok, I solved my issue. I had body { width: 100vw; } in my css. Removing that solved the overflow/scrolling issue.

The weirdest thing is that it was only happening in gatsby production mode. In gatsby develop it wasn't an issue. :thinking:

[fk]

@sarahannnicholson Maybe the comments by @craftedsystems and @GuskiS could help?

[GuskiS]

Could this be related to

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

having the shrink-to-fit=no part? Here is some description of what it does - https://stackoverflow.com/questions/33767533/what-does-the-shrink-to-fit-viewport-meta-attribute-do

I have always used only these width=device-width, initial-scale=1.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[piotrekwitkowski]

This is solved in Chrome 78 (currently in Beta)! https://github.com/GoogleChrome/lighthouse/issues/5558

[fk]

Whoa! Thanks @piotrekwitkowski! 🙏 @sarahannnicholson, are you still with us? ;-)

[sarahannnicholson]

Hey @fk, I'm still here! :P

Thanks @piotrekwitkowski! Looks like it wasn't Gatsby after all! Thanks everyone for the investigations :)

[fk]

Hey @sarahannnicholson! 🎉 Good to see you around! 🤗

It took us a looong time, but thanks to @piotrekwitkowski 🙏, the mystery is solved! 😉