From f0022cd03762e8a48bff9e370a634b53fa57fe1d Mon Sep 17 00:00:00 2001
From: Bendik Aagaard Lynghaug <bendik.lynghaug@gmail.com>
Date: Thu, 6 Aug 2026 15:46:41 +0200
Subject: [PATCH] Size the YES canvas from its container, not
 window.innerHeight

The rasterized "YES" text (and everything downstream: fontSize, line
rendering) was recomputed from window.innerWidth/innerHeight on every
`resize` event. Mobile Safari fires `resize` continuously as the
address bar hides/shows while scrolling, so the text visibly rescaled
mid-scroll even after .hero-yes's own height was already stabilized
via 100svh. Reading the containing .hero-canvas box's own rendered
size instead ties canvas sizing to that already-stable CSS layout, so
a toolbar-only resize recomputes to the same numbers.
---
 yes.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/yes.js b/yes.js
index 0d746b2..8aa95a2 100644
--- a/yes.js
+++ b/yes.js
@@ -58,8 +58,17 @@ export class RasterizedYES {
 
     setupCanvas() {
         const pixelRatio = window.devicePixelRatio || 1;
-        const width = window.innerWidth;
-        const height = window.innerHeight;
+        // Sized from the containing .hero-canvas box (CSS-driven by
+        // .hero-yes's 100svh), not window.innerWidth/innerHeight
+        // directly - mobile Safari fires `resize` continuously as the
+        // address bar hides/shows while scrolling, and innerHeight
+        // tracks that dynamic viewport. Reading the container's own
+        // rendered size instead means a toolbar-only resize recomputes
+        // to the same stable numbers (a no-op redraw) instead of
+        // visibly rescaling the rasterized "YES" text mid-scroll.
+        const rect = this.rasterCanvas.parentElement.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
 
         this.rasterCanvas.style.width = width + 'px';
         this.rasterCanvas.style.height = height + 'px';