Firefox windowWidth and windowHeight return values that are slightly too high

p5.js
1

I’ve recently gotten back into p5 after a few months. In that time, I’ve switched browsers from Brave (a Chromium derivative, if I remember correctly) to Firefox. When I opened a p5 project from a while ago in Firefox, I noticed that the window was slightly too large. Like, by a factor of maybe 20 pixels?

I’ve done some experiments and determined that this is definitely a Firefox based issue. Here’s a simple sketch I made in Atom:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255, 69, 0);
}

Here’s how that sketch appears in my default browser, Firefox (note the navigation bars on the bottom and side of the window):

image
image1920×856 3.67 KB

However, if I open the same sketch in Edge, the issue is not present (I get an orange screen with no navigation bars on the sides of the window) [I would post an image to prove it, but Discourse doesn’t let new users put multiple images in one post].

I’ve checked, my Firefox settings are not zoomed in.

I checked online, and I found one mention of this kind of issue on stackoverflow:

On the above thread, they explain that (for some reason) Firefox resizes all pages after they’ve been loaded, which renders window.innerWidth (and, I assume by extension, window.innerHeight) incorrect.
Is there any fix I can make within p5, or do I need to calculate my own windowWidth / windowHeight variables “once the whole document has been loaded and resized,” like they mention in the stackoverflow thread?

2 Likes
2

Hi @mtavictim,

This is correct, I am able to reproduce your issue in Firefox.

With this CSS hack it works thought:

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

It removes any padding and margin and hide the scroll bars… :yum:

3

It works! Thank you so much!!

1 Like