diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts index fb14b3c0..aa42af78 100644 --- a/addons/addon-webgl/src/WebglRenderer.ts +++ b/addons/addon-webgl/src/WebglRenderer.ts @@ -202,6 +202,9 @@ export class WebglRenderer extends Disposable implements IRenderer { // Force a full refresh. Resizing `_glyphRenderer` should clear it already, // so there is no need to clear it again here. this._clearModel(false); + + // Render synchronously to avoid flicker when the canvas is cleared + this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1, sync: true }); } public handleCharSizeChanged(): void { @@ -617,7 +620,8 @@ export class WebglRenderer extends Disposable implements IRenderer { // the change as it's an exact multiple of the cell sizes. this._canvas.width = width; this._canvas.height = height; - this._requestRedrawViewport(); + // Render synchronously to avoid flicker when the canvas is cleared + this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1, sync: true }); } private _requestRedrawViewport(): void { diff --git a/src/browser/renderer/shared/Types.ts b/src/browser/renderer/shared/Types.ts index f783ffec..de913e9b 100644 --- a/src/browser/renderer/shared/Types.ts +++ b/src/browser/renderer/shared/Types.ts @@ -39,6 +39,11 @@ export interface IRenderDimensions { export interface IRequestRedrawEvent { start: number; end: number; + /** + * Whether the redraw should happen synchronously. This is used to avoid + * flicker when the canvas is resized. + */ + sync?: boolean; } /** diff --git a/src/browser/services/RenderService.ts b/src/browser/services/RenderService.ts index 2348ac14..26334288 100644 --- a/src/browser/services/RenderService.ts +++ b/src/browser/services/RenderService.ts @@ -144,7 +144,7 @@ export class RenderService extends Disposable implements IRenderService { } } - public refreshRows(start: number, end: number, isRedrawOnly: boolean = false): void { + public refreshRows(start: number, end: number, isRedrawOnly: boolean = false, sync: boolean = false): void { if (this._isPaused) { this._needsFullRefresh = true; return; @@ -164,7 +164,12 @@ export class RenderService extends Disposable implements IRenderService { if (!isRedrawOnly) { this._isNextRenderRedrawOnly = false; } - this._renderDebouncer.refresh(start, end, this._rowCount); + + if (sync) { + this._renderRows(start, end); + } else { + this._renderDebouncer.refresh(start, end, this._rowCount); + } } private _renderRows(start: number, end: number): void { @@ -234,7 +239,7 @@ export class RenderService extends Disposable implements IRenderService { this._renderer.value = renderer; // If the value was not set, the terminal is being disposed so ignore it if (this._renderer.value) { - this._renderer.value.onRequestRedraw(e => this.refreshRows(e.start, e.end, true)); + this._renderer.value.onRequestRedraw(e => this.refreshRows(e.start, e.end, true, e.sync)); // Force a refresh this._needsSelectionRefresh = true;