From 71613b5ef59703cc41cda0bd06b384cca2e3a061 Mon Sep 17 00:00:00 2001
From: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
Date: Thu, 6 Aug 2026 16:24:11 +0200
Subject: [PATCH] Debounce the YES canvas resize handler and skip no-op resizes

Even with dimensions now sourced from the stable CSS container
(previous commit), assigning canvas.width/height unconditionally
clears the canvas buffer regardless of whether the value actually
changed. Mobile Safari fires `resize` repeatedly *during* the address
-bar hide/show animation, not just once at the end, so the handler
was still clearing+redrawing on every one of those events. Debounce
to let the animation settle, then skip the redraw entirely if the
resolved size didn't change.
---
 yes.js | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/yes.js b/yes.js
index 8aa95a2..bbf4c43 100644
--- a/yes.js
+++ b/yes.js
@@ -54,6 +54,7 @@ export class RasterizedYES {
         if (this._resizeHandler) {
             window.removeEventListener('resize', this._resizeHandler);
         }
+        clearTimeout(this._resizeDebounce);
     }
 
     setupCanvas() {
@@ -88,9 +89,23 @@ export class RasterizedYES {
         this.pixelRatio = pixelRatio;
 
         if (!this._resizeHandler) {
+            // Debounced, and a no-op if the size didn't actually
+            // change: assigning canvas.width/height clears the canvas
+            // even when set to its current value, and mobile Safari
+            // fires `resize` repeatedly *during* the address-bar
+            // hide/show animation (not once at the end), so an
+            // un-debounced handler was still clearing+redrawing on
+            // every one of those events even after the dimensions
+            // themselves became stable (see setupCanvas above).
             this._resizeHandler = () => {
-                this.setupCanvas();
-                this.rasterizeText();
+                clearTimeout(this._resizeDebounce);
+                this._resizeDebounce = setTimeout(() => {
+                    if (this.destroyed) return;
+                    const rect = this.rasterCanvas.parentElement.getBoundingClientRect();
+                    if (rect.width === this.displayWidth && rect.height === this.displayHeight) return;
+                    this.setupCanvas();
+                    this.rasterizeText();
+                }, 150);
             };
             window.addEventListener('resize', this._resizeHandler);
         }