Skip to content

Commit cb29d19

Browse files
committed
fix(screen-adapter): debounce resize handler to prevent black flicker on web
The window resize event listener was calling _updateFrame() synchronously on every resize event. During continuous window dragging, this triggered dozens of swapchain/backbuffer reallocations per second, each producing a blank frame. This change: - Adds _resizeTimeoutId field for debounce state tracking - Debounces the resize handler using setTimeout with EVENT_TIMEOUT (200ms) - Uncomments and enables the handleResizeEvent guard on the resize path - Adds handleResizeEvent guard to the DPR matchMedia listener, which was previously bypassing it Fixes: #19182
1 parent 411f98d commit cb29d19

1 file changed

Lines changed: 17 additions & 4 deletions

File tree

pal/screen-adapter/web/screen-adapter.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ class ScreenAdapter extends EventTarget {
187187
private _onFullscreenError?: () => void;
188188
// We need to set timeout to handle screen event.
189189
private _orientationChangeTimeoutId = -1;
190+
private _resizeTimeoutId = -1;
190191
private _cachedFrameSize = new Size(0, 0); // cache before enter fullscreen.
191192
private _exactFitScreen = false;
192193
private _isHeadlessMode = false;
@@ -383,10 +384,16 @@ class ScreenAdapter extends EventTarget {
383384
});
384385

385386
window.addEventListener('resize', (): void => {
386-
// if (!this.handleResizeEvent) {
387-
// return;
388-
// }
389-
this._updateFrame();
387+
if (!this.handleResizeEvent) {
388+
return;
389+
}
390+
if (this._resizeTimeoutId !== -1) {
391+
clearTimeout(this._resizeTimeoutId);
392+
}
393+
this._resizeTimeoutId = setTimeout((): void => {
394+
this._updateFrame();
395+
this._resizeTimeoutId = -1;
396+
}, EVENT_TIMEOUT);
390397
});
391398

392399
const notifyOrientationChange = (orientation): void => {
@@ -439,11 +446,17 @@ class ScreenAdapter extends EventTarget {
439446
const mediaQueryResolution = window.matchMedia(`(resolution: ${dpr}dppx)`);
440447
if (mediaQueryResolution.addEventListener) {
441448
mediaQueryResolution.addEventListener('change', (): void => {
449+
if (!this.handleResizeEvent) {
450+
return;
451+
}
442452
this.emit('window-resize', this.windowSize.width, this.windowSize.height);
443453
updateDPRChangeListener();
444454
}, { once: true });
445455
} else if (mediaQueryResolution.addListener) {
446456
mediaQueryResolution.addListener((): void => {
457+
if (!this.handleResizeEvent) {
458+
return;
459+
}
447460
this.emit('window-resize', this.windowSize.width, this.windowSize.height);
448461
});
449462
}

0 commit comments

Comments
 (0)