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';