fix: restrict the renderer's canvas to be at most as large as the screen

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.10.4
+
+- Fix: restrict the renderer's canvas to be at most as large as the screen. Previously we had the canvas size bound to `window.innerWidth` and `window.innerHeight`. However, in VSCode it was possible that `window.innerHeight` was muuuuch larger than the actual screen, which in turn caused a WebGL error (invalid renderbuffer size). This issues was first reported at https://github.com/flekschas/jupyter-scatter/issues/37.
+
 ## 1.10.3
 
 - Fix: properly set mouse mode on initialization and add tests for it

src/renderer.js

@@ -145,8 +145,22 @@ export const createRenderer = (
   });
 
   const resize = () => {
-    canvas.width = window.innerWidth * window.devicePixelRatio;
-    canvas.height = window.innerHeight * window.devicePixelRatio;
+    // We need to limit the width and height by the screen size to prevent
+    // a bug in VSCode where the window height is said to be taller than the
+    // screen height. The problem with too large dimensions is that at some
+    // point WebGL will break down because there's an upper limit on how large
+    // any buffer and texture can be. It also harms the performance quite a bit.
+    //
+    // By restricting the widht/height to the screen size we should have a safe
+    // upper limit for the canvas size.
+    //
+    // @see
+    // https://github.com/microsoft/vscode/issues/225808
+    // https://github.com/flekschas/jupyter-scatter/issues/37
+    const width = Math.min(window.innerWidth, window.screen.availWidth);
+    const height = Math.min(window.innerHeight, window.screen.availHeight);
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
     fboRes[0] = canvas.width;
     fboRes[1] = canvas.height;
     fbo.resize(...fboRes);