Fix Plotly 3D resize jitter loops across regression visualizations

linear-regression/gradient-descent.html

@@ -90,7 +90,7 @@
           <div id="landscapePlot" class="landscape-plot"></div>
         </div>
 
-        <p class="slice-label">Drag to rotate · Scroll to zoom · Resize from the corner</p>
+        <p class="slice-label">Drag to rotate · Scroll to zoom · Use Fit / +/- / Fullscreen to resize</p>
       </section>
 
       <section class="panel output">
@@ -122,6 +122,6 @@
     </main>
 
     <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
-    <script src="gradient.js?v=20260813a"></script>
+    <script src="gradient.js?v=20260814b"></script>
   </body>
 </html>

linear-regression/gradient.js

@@ -37,6 +37,9 @@ const DEFAULT_CAMERA = {
   up: { x: 0, y: 0, z: 1 },
 };
 
+const RESIZE_EPSILON = 1;
+const DEBUG_RESIZE = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("debugResize");
+
 const state = {
   data: [],
   steps: [],
@@ -46,8 +49,35 @@ const state = {
   landscapeCamera: null,
   landscapePlotReady: false,
   landscapeResizeObserver: null,
+  landscapeResizeRaf: null,
+  lastLandscapeSize: null,
 };
 
+function debugResizeLog(source, extra = {}) {
+  if (!DEBUG_RESIZE) return;
+
+  const wrapRect = landscapePlotWrap.getBoundingClientRect();
+  const parent = landscapePlotWrap.parentElement;
+  const parentRect = parent ? parent.getBoundingClientRect() : null;
+  const docEl = document.documentElement;
+
+  const payload = {
+    source,
+    wrapClient: `${landscapePlotWrap.clientWidth}x${landscapePlotWrap.clientHeight}`,
+    wrapRect: `${wrapRect.width.toFixed(2)}x${wrapRect.height.toFixed(2)}`,
+    parentRect: parentRect ? `${parentRect.width.toFixed(2)}x${parentRect.height.toFixed(2)}` : "n/a",
+    win: `${window.innerWidth}x${window.innerHeight}`,
+    viewport: `${docEl.clientWidth}x${docEl.clientHeight}`,
+    scroll: `${docEl.scrollWidth}x${docEl.scrollHeight}`,
+    bodyScrollY: window.scrollY,
+    hasVScrollbar: docEl.scrollHeight > docEl.clientHeight,
+    hasHScrollbar: docEl.scrollWidth > docEl.clientWidth,
+    ...extra,
+  };
+
+  console.debug("[linear-resize]", payload);
+}
+
 function init() {
   resizeCanvases();
   fitLandscapeSize();
@@ -92,21 +122,36 @@ function initLandscapeInteractions() {
 
   document.addEventListener("fullscreenchange", () => {
     plotFullscreenBtn.textContent = document.fullscreenElement === landscapePlotWrap ? "Exit Fullscreen" : "Fullscreen";
-    resizeLandscapePlot();
+    debugResizeLog("fullscreenchange", { inFullscreen: document.fullscreenElement === landscapePlotWrap });
+
+    if (document.fullscreenElement === landscapePlotWrap) {
+      setLandscapeSize(window.innerWidth - 24, window.innerHeight - 24, true);
+      return;
+    }
+
+    constrainLandscapeSizeToContainer();
   });
 
   if (window.ResizeObserver) {
-    state.landscapeResizeObserver = new ResizeObserver(() => {
-      resizeLandscapePlot();
+    state.landscapeResizeObserver = new ResizeObserver((entries) => {
+      const entry = entries && entries[0];
+      const contentRect = entry ? entry.contentRect : null;
+      debugResizeLog("ResizeObserver", {
+        observed: contentRect ? `${contentRect.width.toFixed(2)}x${contentRect.height.toFixed(2)}` : "n/a",
+      });
+      queueLandscapeResize(false);
     });
     state.landscapeResizeObserver.observe(landscapePlotWrap);
   }
 }
 
 function handleResize() {
+  debugResizeLog("window.resize");
   resizeCanvases();
 
-  if (document.fullscreenElement !== landscapePlotWrap) {
+  if (document.fullscreenElement === landscapePlotWrap) {
+    setLandscapeSize(window.innerWidth - 24, window.innerHeight - 24, false);
+  } else {
     constrainLandscapeSizeToContainer();
   }
 
@@ -122,7 +167,7 @@ function resizeCanvasToContainer(canvas, ratio, minHeight, maxHeight) {
   const parent = canvas.parentElement;
   if (!parent) return;
 
-  const width = Math.max(320, Math.floor(parent.clientWidth - 2));
+  const width = Math.max(320, Math.round(parent.getBoundingClientRect().width));
   const targetHeight = Math.floor(width * ratio);
   const height = Math.max(minHeight, Math.min(maxHeight, targetHeight));
 
@@ -134,7 +179,7 @@ function resizeCanvasToContainer(canvas, ratio, minHeight, maxHeight) {
 
 function getLandscapeFitSize() {
   const host = landscapePlotWrap.parentElement;
-  const hostWidth = host ? host.clientWidth : window.innerWidth;
+  const hostWidth = host ? host.getBoundingClientRect().width : window.innerWidth;
   const maxW = Math.max(320, Math.min(1000, hostWidth - 4));
 
   if (window.innerWidth < 680) {
@@ -155,7 +200,7 @@ function fitLandscapeSize(forceResize = false) {
 
 function setLandscapeSize(rawW, rawH, forceResize = false) {
   const host = landscapePlotWrap.parentElement;
-  const hostMaxW = host ? host.clientWidth - 4 : rawW;
+  const hostMaxW = host ? host.getBoundingClientRect().width - 4 : rawW;
   const isFullscreen = document.fullscreenElement === landscapePlotWrap;
 
   const minW = 320;
@@ -165,25 +210,54 @@ function setLandscapeSize(rawW, rawH, forceResize = false) {
 
   const width = Math.round(Math.max(minW, Math.min(maxW, rawW)));
   const height = Math.round(Math.max(minH, Math.min(maxH, rawH)));
+  const rect = landscapePlotWrap.getBoundingClientRect();
+  const widthChanged = Math.abs(Math.round(rect.width) - width) > RESIZE_EPSILON;
+  const heightChanged = Math.abs(Math.round(rect.height) - height) > RESIZE_EPSILON;
 
-  if (forceResize || landscapePlotWrap.clientWidth !== width || landscapePlotWrap.clientHeight !== height) {
+  if (widthChanged || heightChanged) {
     landscapePlotWrap.style.width = `${width}px`;
     landscapePlotWrap.style.height = `${height}px`;
-    resizeLandscapePlot();
+    debugResizeLog("setLandscapeSize.apply", { width, height, forceResize });
+  }
+
+  if (forceResize || widthChanged || heightChanged) {
+    queueLandscapeResize(true);
   }
 }
 
 function constrainLandscapeSizeToContainer() {
-  setLandscapeSize(landscapePlotWrap.clientWidth, landscapePlotWrap.clientHeight, true);
+  const rect = landscapePlotWrap.getBoundingClientRect();
+  setLandscapeSize(rect.width, rect.height, false);
 }
 
 function scaleLandscapeSize(factor) {
-  setLandscapeSize(landscapePlotWrap.clientWidth * factor, landscapePlotWrap.clientHeight * factor, true);
+  const rect = landscapePlotWrap.getBoundingClientRect();
+  setLandscapeSize(rect.width * factor, rect.height * factor, false);
 }
 
-function resizeLandscapePlot() {
+function queueLandscapeResize(force = false) {
   if (!state.landscapePlotReady || typeof Plotly === "undefined") return;
-  requestAnimationFrame(() => {
+
+  const width = Math.round(landscapePlotWrap.clientWidth);
+  const height = Math.round(landscapePlotWrap.clientHeight);
+  if (width <= 0 || height <= 0) return;
+
+  if (!force && state.lastLandscapeSize) {
+    const dw = Math.abs(width - state.lastLandscapeSize.width);
+    const dh = Math.abs(height - state.lastLandscapeSize.height);
+    if (dw <= RESIZE_EPSILON && dh <= RESIZE_EPSILON) return;
+  }
+
+  state.lastLandscapeSize = { width, height };
+  debugResizeLog("queueLandscapeResize", { width, height, force });
+
+  if (state.landscapeResizeRaf) {
+    cancelAnimationFrame(state.landscapeResizeRaf);
+  }
+
+  state.landscapeResizeRaf = requestAnimationFrame(() => {
+    state.landscapeResizeRaf = null;
+    debugResizeLog("Plotly.Plots.resize", { width, height });
     Plotly.Plots.resize(landscapePlot);
   });
 }
@@ -657,7 +731,7 @@ function renderLandscapePlotly(data) {
   };
 
   const config = {
-    responsive: true,
+    responsive: false,
     displaylogo: false,
     scrollZoom: true,
     doubleClick: "reset",
@@ -671,14 +745,17 @@ function renderLandscapePlotly(data) {
   plotPromise.then(() => {
     if (!state.landscapePlotReady) {
       state.landscapePlotReady = true;
+      state.lastLandscapeSize = null;
       landscapePlot.on("plotly_relayout", (ev) => {
         if (ev && ev["scene.camera"]) {
           state.landscapeCamera = cloneCamera(ev["scene.camera"]);
         }
+        debugResizeLog("plotly_relayout", {
+          hasCamera: !!(ev && ev["scene.camera"]),
+        });
       });
+      queueLandscapeResize(true);
     }
-
-    resizeLandscapePlot();
   });
 }
 

linear-regression/styles.css

@@ -18,9 +18,10 @@ html,
 body {
   height: auto;
   min-height: 100%;
-  overflow-y: auto !important;
+  overflow-y: scroll !important;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable both-edges;
 }
 
 body {
@@ -437,18 +438,32 @@ input[type="checkbox"] {
   min-height: 320px;
   max-width: 1400px;
   max-height: 900px;
-  resize: both;
-  overflow: auto;
+  overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: #fff;
   position: relative;
+  contain: layout size paint;
+  min-inline-size: 0;
+  min-block-size: 0;
 }
 
 .landscape-plot {
   width: 100%;
   height: 100%;
-  min-height: 100%;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.landscape-plot-wrap:fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  border-width: 0;
 }
 
 .log-wrap {

logistic-regression/cost-visualization.html

@@ -112,7 +112,7 @@
           <div id="landscapePlot" class="landscape-plot"></div>
         </div>
 
-        <p class="slice-label">Drag to rotate · Scroll to zoom · Hover to inspect · Resize from the corner</p>
+        <p class="slice-label">Drag to rotate · Scroll to zoom · Hover to inspect · Use Fit / +/- / Fullscreen to resize</p>
 
         <div class="iteration-block">
           <label for="landscapeStep">Gradient Descent Step</label>
@@ -130,6 +130,6 @@
     </main>
 
     <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
-    <script src="cost.js?v=20260813b"></script>
+    <script src="cost.js?v=20260814b"></script>
   </body>
 </html>

logistic-regression/cost.js

@@ -53,6 +53,9 @@ const DEFAULT_CAMERA = {
   up: { x: 0, y: 0, z: 1 },
 };
 
+const RESIZE_EPSILON = 1;
+const DEBUG_RESIZE = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("debugResize");
+
 const GRID_N = 60;
 const MIN_SPAN = 2.0;
 
@@ -95,8 +98,35 @@ const state = {
   plotReady: false,
   camera3d: null,
   resizeObserver: null,
+  resizeRaf: null,
+  lastPlotSize: null,
 };
 
+function debugResizeLog(source, extra = {}) {
+  if (!DEBUG_RESIZE) return;
+
+  const wrapRect = plotWrap.getBoundingClientRect();
+  const parent = plotWrap.parentElement;
+  const parentRect = parent ? parent.getBoundingClientRect() : null;
+  const docEl = document.documentElement;
+
+  const payload = {
+    source,
+    wrapClient: `${plotWrap.clientWidth}x${plotWrap.clientHeight}`,
+    wrapRect: `${wrapRect.width.toFixed(2)}x${wrapRect.height.toFixed(2)}`,
+    parentRect: parentRect ? `${parentRect.width.toFixed(2)}x${parentRect.height.toFixed(2)}` : "n/a",
+    win: `${window.innerWidth}x${window.innerHeight}`,
+    viewport: `${docEl.clientWidth}x${docEl.clientHeight}`,
+    scroll: `${docEl.scrollWidth}x${docEl.scrollHeight}`,
+    bodyScrollY: window.scrollY,
+    hasVScrollbar: docEl.scrollHeight > docEl.clientHeight,
+    hasHScrollbar: docEl.scrollWidth > docEl.clientWidth,
+    ...extra,
+  };
+
+  console.debug("[logistic-resize]", payload);
+}
+
 function hasPlotly() {
   return typeof window !== "undefined" && typeof window.Plotly !== "undefined";
 }
@@ -471,7 +501,7 @@ function buildHover(meta, point) {
 
 function getFitSize() {
   const host = plotWrap.parentElement;
-  const hostW = host ? host.clientWidth : window.innerWidth;
+  const hostW = host ? host.getBoundingClientRect().width : window.innerWidth;
   const maxW = Math.max(320, Math.min(1000, hostW - 4));
 
   if (window.innerWidth < 680) return { width: maxW, height: 390 };
@@ -481,7 +511,7 @@ function getFitSize() {
 
 function setPlotSize(rawW, rawH, forceResize = false) {
   const host = plotWrap.parentElement;
-  const hostMaxW = host ? host.clientWidth - 4 : rawW;
+  const hostMaxW = host ? host.getBoundingClientRect().width - 4 : rawW;
   const inFullscreen = document.fullscreenElement === plotWrap;
 
   const minW = 320;
@@ -491,11 +521,18 @@ function setPlotSize(rawW, rawH, forceResize = false) {
 
   const w = Math.round(Math.max(minW, Math.min(maxW, rawW)));
   const h = Math.round(Math.max(minH, Math.min(maxH, rawH)));
+  const rect = plotWrap.getBoundingClientRect();
+  const widthChanged = Math.abs(Math.round(rect.width) - w) > RESIZE_EPSILON;
+  const heightChanged = Math.abs(Math.round(rect.height) - h) > RESIZE_EPSILON;
 
-  if (forceResize || plotWrap.clientWidth !== w || plotWrap.clientHeight !== h) {
+  if (widthChanged || heightChanged) {
     plotWrap.style.width = `${w}px`;
     plotWrap.style.height = `${h}px`;
-    resizePlot();
+    debugResizeLog("setPlotSize.apply", { width: w, height: h, forceResize });
+  }
+
+  if (forceResize || widthChanged || heightChanged) {
+    queuePlotResize(true);
   }
 }
 
@@ -504,9 +541,31 @@ function fitPlotSize(forceResize = false) {
   setPlotSize(size.width, size.height, forceResize);
 }
 
-function resizePlot() {
+function queuePlotResize(force = false) {
   if (!state.plotReady || !hasPlotly()) return;
-  requestAnimationFrame(() => window.Plotly.Plots.resize(plotEl));
+
+  const width = Math.round(plotWrap.clientWidth);
+  const height = Math.round(plotWrap.clientHeight);
+  if (width <= 0 || height <= 0) return;
+
+  if (!force && state.lastPlotSize) {
+    const dw = Math.abs(width - state.lastPlotSize.width);
+    const dh = Math.abs(height - state.lastPlotSize.height);
+    if (dw <= RESIZE_EPSILON && dh <= RESIZE_EPSILON) return;
+  }
+
+  state.lastPlotSize = { width, height };
+  debugResizeLog("queuePlotResize", { width, height, force });
+
+  if (state.resizeRaf) {
+    cancelAnimationFrame(state.resizeRaf);
+  }
+
+  state.resizeRaf = requestAnimationFrame(() => {
+    state.resizeRaf = null;
+    debugResizeLog("Plotly.Plots.resize", { width, height });
+    window.Plotly.Plots.resize(plotEl);
+  });
 }
 
 function toggleFullscreen() {
@@ -717,7 +776,7 @@ function renderLandscape(caseKey, grid) {
     };
 
     const config2d = {
-      responsive: true,
+      responsive: false,
       displaylogo: false,
       scrollZoom: true,
       modeBarButtonsToRemove: ["lasso2d", "select2d"],
@@ -730,9 +789,10 @@ function renderLandscape(caseKey, grid) {
     p2d.then(() => {
       if (!state.plotReady) {
         state.plotReady = true;
+        state.lastPlotSize = null;
         bindPlotClick();
+        queuePlotResize(true);
       }
-      resizePlot();
     });
     return;
   }
@@ -838,7 +898,7 @@ function renderLandscape(caseKey, grid) {
   };
 
   const config3d = {
-    responsive: true,
+    responsive: false,
     displaylogo: false,
     scrollZoom: true,
     doubleClick: "reset",
@@ -852,14 +912,18 @@ function renderLandscape(caseKey, grid) {
   p3d.then(() => {
     if (!state.plotReady) {
       state.plotReady = true;
+      state.lastPlotSize = null;
       bindPlotClick();
       plotEl.on("plotly_relayout", (ev) => {
         if (ev && ev["scene.camera"]) {
           state.camera3d = cloneCamera(ev["scene.camera"]);
         }
+        debugResizeLog("plotly_relayout", {
+          hasCamera: !!(ev && ev["scene.camera"]),
+        });
       });
+      queuePlotResize(true);
     }
-    resizePlot();
   });
 }
 
@@ -884,7 +948,7 @@ function bindPlotClick() {
 
 function drawClassifier(caseKey) {
   const parent = classifierCanvas.parentElement;
-  const width = Math.max(320, Math.floor(parent.clientWidth - 2));
+  const width = Math.max(320, Math.round(parent.getBoundingClientRect().width));
   const height = 310;
   if (classifierCanvas.width !== width || classifierCanvas.height !== height) {
     classifierCanvas.width = width;
@@ -1218,24 +1282,41 @@ function bindEvents() {
 
   document.addEventListener("fullscreenchange", () => {
     controls.plotFullscreenBtn.textContent = document.fullscreenElement === plotWrap ? "Exit Fullscreen" : "Fullscreen";
-    resizePlot();
+    debugResizeLog("fullscreenchange", { inFullscreen: document.fullscreenElement === plotWrap });
+
+    if (document.fullscreenElement === plotWrap) {
+      setPlotSize(window.innerWidth - 24, window.innerHeight - 24, true);
+      return;
+    }
+
+    const rect = plotWrap.getBoundingClientRect();
+    setPlotSize(rect.width, rect.height, false);
   });
 
   window.addEventListener("resize", () => {
-    if (document.fullscreenElement !== plotWrap) {
-      setPlotSize(plotWrap.clientWidth, plotWrap.clientHeight, true);
+    debugResizeLog("window.resize");
+    if (document.fullscreenElement === plotWrap) {
+      setPlotSize(window.innerWidth - 24, window.innerHeight - 24, false);
+    } else {
+      const rect = plotWrap.getBoundingClientRect();
+      setPlotSize(rect.width, rect.height, false);
     }
+
     drawClassifier(controls.caseSelect.value);
-    resizePlot();
   });
 
   if (window.ResizeObserver) {
-    state.resizeObserver = new window.ResizeObserver(() => {
-      resizePlot();
-      drawClassifier(controls.caseSelect.value);
+    state.resizeObserver = new window.ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target === plotWrap) {
+          debugResizeLog("ResizeObserver", {
+            observed: `${entry.contentRect.width.toFixed(2)}x${entry.contentRect.height.toFixed(2)}`,
+          });
+          queuePlotResize(false);
+        }
+      }
     });
     state.resizeObserver.observe(plotWrap);
-    state.resizeObserver.observe(classifierCanvas.parentElement);
   }
 }
 

logistic-regression/styles.css

@@ -17,9 +17,10 @@ html,
 body {
   height: auto;
   min-height: 100%;
-  overflow-y: auto !important;
+  overflow-y: scroll !important;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable both-edges;
 }
 
 body {
@@ -245,17 +246,31 @@ select {
   min-height: 320px;
   max-width: 1400px;
   max-height: 900px;
-  resize: both;
-  overflow: auto;
+  overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: #fff;
+  contain: layout size paint;
+  min-inline-size: 0;
+  min-block-size: 0;
 }
 
 .landscape-plot {
   width: 100%;
   height: 100%;
-  min-height: 100%;
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.landscape-plot-wrap:fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  border-width: 0;
 }
 
 .plot-fallback {