Force a sync render after resize occurs

Fixes #4922
Related microsoft/vscode#230120

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 {

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;
 }
 
 /**

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;