marcofugaro / threejs-modern-app

Boilerplate and utils for a fullscreen Three.js app

Home Page:https://marcofugaro.github.io/threejs-modern-app/?debug

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Does not completely fill the screen

farnasirim opened this issue · comments

Hi, first I'd like to thank you for this, very useful.

Using google chrome on gnome with 200% scaling, I can see a border of size 1 (?) pixel on the right and bottom sides of the screen. If I switch to fullscreen mode, only the one on the right side of the screen remains.

I know this is naive and don't intend to suggest this as a solution but while playing around a little with things, this seems to make it look like it works:

     width = window.innerWidth + 1;
     height = window.innerHeight + 1;

Screenshots debug utility both look fine to me after zooming in, the one after is one pixel wider/taller obviously.
before adding the above:
default

after:
after-plus-one-to-sizes

Some system screenshots to show what I see:
default: (note the border on the right side)
default

after adding + 1 to sizes:
size-plus-one

default code, but turned off gnome scaling. This looks ok to me
no-scaling

This doesn't happen on firefox. Cannot test on chromium on this machine right now. So the combination is:

  • gnome
  • 4k monitor
  • 200% scaling
  • google chrome

I'm keen to know what you think.
Thanks again

Hey, this looks like it's related to the browser (Chrome) having some precision errors when scaling is enabled. So window.innerWidth does not match the actual screen size.

Unfortunately, I don't think there is really anything you can do about this.