Debounce the YES canvas resize handler and skip no-op resizes
Deploy / deploy (push) Successful in 33s

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.
This commit is contained in:
Bendik Aagaard Lynghaug
2026-08-06 16:24:11 +02:00
parent f0022cd037
commit 71613b5ef5
+15
View File
@@ -54,6 +54,7 @@ export class RasterizedYES {
if (this._resizeHandler) { if (this._resizeHandler) {
window.removeEventListener('resize', this._resizeHandler); window.removeEventListener('resize', this._resizeHandler);
} }
clearTimeout(this._resizeDebounce);
} }
setupCanvas() { setupCanvas() {
@@ -88,9 +89,23 @@ export class RasterizedYES {
this.pixelRatio = pixelRatio; this.pixelRatio = pixelRatio;
if (!this._resizeHandler) { 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._resizeHandler = () => {
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.setupCanvas();
this.rasterizeText(); this.rasterizeText();
}, 150);
}; };
window.addEventListener('resize', this._resizeHandler); window.addEventListener('resize', this._resizeHandler);
} }