Debounce the YES canvas resize handler and skip no-op resizes
Deploy / deploy (push) Successful in 33s
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:
@@ -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 = () => {
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user