diff --git a/web/maplibre-demo.js b/web/maplibre-demo.js
index 2b666dd..7e227ff 100644
--- a/web/maplibre-demo.js
+++ b/web/maplibre-demo.js
@@ -168,6 +168,17 @@ async function renderSharedAssetFromQuery() {
 }
 
 function createThreeLayer() {
+  function syncRendererSize(m) {
+    if (!threeRenderer) return;
+    const canvas = m.getCanvas();
+    if (!canvas) return;
+    const width = canvas.clientWidth || canvas.width || 0;
+    const height = canvas.clientHeight || canvas.height || 0;
+    if (width <= 0 || height <= 0) return;
+    threeRenderer.setPixelRatio(window.devicePixelRatio || 1);
+    threeRenderer.setSize(width, height, false);
+  }
+
   return {
     id: "threejs-custom-layer",
     type: "custom",
@@ -187,14 +198,20 @@ function createThreeLayer() {
         antialias: true,
       });
       threeRenderer.autoClear = false;
+      syncRendererSize(m);
+      m.on("resize", () => syncRendererSize(m));
     },
     render(gl, matrix) {
+      const canvas = map.getCanvas();
+      if (!canvas || canvas.width <= 0 || canvas.height <= 0 || gl.drawingBufferWidth <= 0 || gl.drawingBufferHeight <= 0) {
+        return;
+      }
       const m = new THREE.Matrix4().fromArray(matrix);
       threeCamera.projectionMatrix = m;
+      syncRendererSize(map);
       threeRenderer.resetState();
       threeRenderer.render(threeScene, threeCamera);
       map.triggerRepaint();
-      gl.disable(gl.DEPTH_TEST);
     },
   };
 }