Kaboom.js Whitespace Issue

[elicode1]

Bug description: There is whitespace at the bottom of the canvas when loading a Kaboom js game on Android, even though the fullscreen=true parameter is included in the init code. This issue does not occur on iOS devices.

Expected vs Current Behavior: The expected behavior is for the Kaboom js game to display without any whitespace at the bottom of the canvas on Android, just like it does on iOS. The current behavior is that whitespace appears at the bottom of the canvas on Android.

Steps to reproduce:

1. Load the Kaboom js game on an Android device.
2. Observe that there is whitespace at the bottom of the canvas.

Bug appears at this link: onions-life-1.sharmnten.repl.co

Screenshot(s)/Screen Recording:

Browser/OS/Device: The bug appears on Android devices, but not on iOS devices.

Replit Profile: https://replit.com/@sharmnten

[elicode1]

I have learned that the bug appears to be due to an issue with Kaboom being run as a PWA on android. I was able to implement the following code:

let canvasWidth = document.documentElement.clientWidth;
let canvasHeight = document.documentElement.clientHeight;
let deviceMode = null;
let heightStretch = 0;
if ((window.matchMedia('(display-mode: fullscreen)').matches || window.navigator.fullscreen) && navigator.userAgent.includes('Android')) {
  // Code for PWA running on Android
  deviceMode = "Android";
  heightStretch = 75;
} else if ((window.matchMedia('(display-mode: fullscreen)').matches || window.navigator.fullscreen) && navigator.userAgent.includes('CrOS')) {
  // Code for PWA running on Chrome OS
  deviceMode = "ChromeOS";
} else {
  // Code for non-PWA behavior or other platforms
  deviceMode = "Other";
}

and then update my init statement like so:

kaboom({
  background: [153, 204, 255],
  width: canvasWidth,
  height: canvasHeight + heightStretch,
})

It’s definitely not the most perfect solution, but it should work for android users.