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) {
|
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 = () => {
|
||||||
this.setupCanvas();
|
clearTimeout(this._resizeDebounce);
|
||||||
this.rasterizeText();
|
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);
|
window.addEventListener('resize', this._resizeHandler);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user