Size the YES canvas from its container, not window.innerHeight
Deploy / deploy (push) Successful in 34s
Deploy / deploy (push) Successful in 34s
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.
This commit is contained in:
@@ -58,8 +58,17 @@ export class RasterizedYES {
|
|||||||
|
|
||||||
setupCanvas() {
|
setupCanvas() {
|
||||||
const pixelRatio = window.devicePixelRatio || 1;
|
const pixelRatio = window.devicePixelRatio || 1;
|
||||||
const width = window.innerWidth;
|
// Sized from the containing .hero-canvas box (CSS-driven by
|
||||||
const height = window.innerHeight;
|
// .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.width = width + 'px';
|
||||||
this.rasterCanvas.style.height = height + 'px';
|
this.rasterCanvas.style.height = height + 'px';
|
||||||
|
|||||||
Reference in New Issue
Block a user