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); }