Lighthouse audit says content not sized correctly for viewport, despite body width being 100%

Question

I have set the body css of my html page to 100% and with no margins or padding, but it still does not pass the following Google Lighthouse audit "Content Sized Correctly for Viewport".

The audit passes if window.innerWidth === window.outerWidth

It says the viewport size is 422px whereas the window size is 412px, so this means the window is 10px wider than wanted.

When I inspect the body element, it is showing as being 412px wide.

I would like to pass this audit, any ideas of what is causing this?

Answer 1

When you reveal the DevTools panel, it usually appears next to the main application page, which messes with the viewport size. I solved the problem by:

• maximizing the browser window
• docking the DevTools panel below the page

Answer 2

add this to your css:

html{overflow-x: hidden;}

Answer 3

If you have an "orphan" row Lighthouse fires that error. You need to check where you are using that row and wrap it in a class container-fluid like this:

<div class="container-fluid">
  <div class="row"></div>
</div>

Answer 4

I came across this error when adding my own class to container div that only added some top padding:

<div class="container content">
   <div class="row">
      <div class="col-md-6">
      </div>
   </div>
</div>

Moving my custom class outside made the audit message go away.

<div class="content">
   <div class="container">
      <div class="row">
         <div class="col-md-6">
         </div>
      </div>
   </div>
</div>