gatsby: Content is not sized correctly for the viewport
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
- Go to the Gatsby website https://www.gatsbyjs.org/docs/
- Open the chrome dev tools
- Run a Lighthouse audit.
- 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.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 3
- Comments: 19 (12 by maintainers)
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 developit wasn’t an issue. 🤔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.innerWidthandwindow.outerWidthwere in fact not the same, and that the issue is somewhere in Gatsby’s init.