Examples get scrollbars when resizing the window and custom scaling in the os.

Description of the problem

II noticed today all the examples currently get scrollbars as I resize them on Windows. Depending on the size they appear and disappear.

Chrome 80

Firefox 75

I’d like to suggest again that I think the default CSS for the examples should effectively be

html,
body,
canvas {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}

or if you want it separated

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}

• The height: 100% in body is needed to make sure the body covers the entire window
• The height: 100% in html is needed on firefox

And I’d suggst at a minimum the example code should be changed to

1. not have a container. AFAICT it has no point

   container = document.createElement( 'div' );
   document.body.appendChild( container );
   ...
   container.appendChild( renderer.domElement );
   

   to just

   document.body.appendChild( renderer.domElement );
   

   3 lines to 1

2. pass false to setSize

       renderer.setSize( window.innerWidth, window.innerHeight, false );
   

Of course I’d still suggest switching the default to do this all deeper in three and just make CSS the sizing the default and mostly get rid of the need for setSize in most apps as somewhat suggested in #4903

In any case how you fix it or if you fix it is up to you. I just assumed you didn’t want scrollbars to appear.

Three.js version

• Dev
• r115
• …

Browser

• All of them
• Chrome
• Firefox
• [?] Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

[mrdoob]

Forgot to share here some investigation I did on this issue some months ago: https://github.com/w3c/csswg-drafts/issues/5260#issuecomment-726044922

[mrdoob]

Looks like changing canvas to display: block introduced this issue. It was all fine when we were using overflow: hidden. I’m partly kidding. I know we were “hiding” the issue 😛

We should definitely do things “the right way” as much as we can, but I was always unsure (and still am) of exposing users to css.