Content is not sized correctly for the viewport

[garyedwards]

Bug report

What is the current behavior?

The viewport size is 424px, whereas the window size is 412px. This can be seen on mobile phone size screens when you swipe left the page moves.

If the current behavior is a bug, please provide the steps to reproduce.

Mobile

• Go to https://gatsby-netlify-cms.netlify.com/
• Swipe left
• the screen moves and you get a white bar down the right hand side

Lighthouse

• Go to https://gatsby-netlify-cms.netlify.com/
• Run Lighthouse tests
• Under PWA Optimized -> "Content is not sized correctly for the viewport"

What is the expected behavior?

window.innerWidth === window.outerWidth

https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport

Other relevant information:

None

Node.js version: N/A NPM/Yarn version N/A Operating System: N/A Additional tools: N/A

[nyan-matt]

I ran into this issue as well. I thought it might be related to Bulma styles as there are some guidelines about how child classes and elements are arranged (e.g., sections should be direct children of body See Bulma docs as this starter template doesn't adhere to all of those rules)

I also spotted a similar issue with the horizontal scrollbar on the bulma project -> Columns causing horizonal scroll on mobile

I tried a few different things which seemed to work on mobile dev tools, but the issue still persisted on actual mobile browsers.

In the end, I placed a overflow-x: hidden on the body element which seemed to work for the most part. Your mileage may vary.

[ZoltanVeres]

Thanks for reporting the issue. We shouldn't render those unnecessary divs in the first place. I'm unsure how to fix it since Gatsby (and React) is putting those divs in the rendering tree. I'm not gonna be able to look into this in the next couple of weeks so Any suggestions and/or PRs are very welcome!

[nyan-matt]

overflow-x: hidden on body solves the visual issue by removing the horizontal scrollbar, but has other undesirable side effects in that it breaks shouldUpdateScroll if you happen to want to use it. (see https://github.com/gatsbyjs/gatsby/issues/7454) After a little more digging, it looks like a bulma .columns style with negative margins is pushing out the width causing the issue above. Instead of the overflow-x workaround, if you override the .columns margin style, that should do the trick (without breaking shouldUpdateScroll)

While not a great solution, it would have saved me a few hours of headaches if I knew about it.

/src/components/all.sass

...
 // apply to .columns or add another class for specificity
.columns 
  margin-left: 0 !important
  margin-right: 0 !important
...

[erquhart]

This is an issue within Bulma. Dropped a comment that will hopefully lead to resolution: https://github.com/jgthms/bulma/issues/1540#issuecomment-512969132

In the meantime, we need to provide a container with padding to absorb the negative margins of .columns.

[btahir]

Gotcha. It seems there are some things to be resolved before adding the plugins. For now I have made the PR to fix the footer at least (was quick): https://github.com/netlify-templates/gatsby-starter-netlify-cms/pull/574