diff --git a/addons/xterm-addon-canvas/src/BaseRenderLayer.ts b/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
index d2a7a4ed2d..fb1468842b 100644
--- a/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
@@ -373,6 +373,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     } else {
       glyph = this._charAtlas.getRasterizedGlyph(cell.getCode() || WHITESPACE_CELL_CODE, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext);
     }
+    if (!glyph.size.x || !glyph.size.y) {
+      return;
+    }
     this._ctx.save();
     this._clipRow(y);
     // Draw the image, use the bitmap if it's available
diff --git a/addons/xterm-addon-canvas/src/TextRenderLayer.ts b/addons/xterm-addon-canvas/src/TextRenderLayer.ts
index 66fc5106bb..b429e8c226 100644
--- a/addons/xterm-addon-canvas/src/TextRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/TextRenderLayer.ts
@@ -95,6 +95,12 @@ export class TextRenderLayer extends BaseRenderLayer {
           continue;
         }
 
+        // exit early for NULL and SP
+        const code = cell.getCode();
+        if (code === 0 || code === 32) {
+          continue;
+        }
+
         // Process any joined character ranges as needed. Because of how the
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.
diff --git a/addons/xterm-addon-webgl/src/WebglAddon.ts b/addons/xterm-addon-webgl/src/WebglAddon.ts
index 6dbbeca927..97e2ce0cb3 100644
--- a/addons/xterm-addon-webgl/src/WebglAddon.ts
+++ b/addons/xterm-addon-webgl/src/WebglAddon.ts
@@ -9,7 +9,6 @@ import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { getSafariVersion, isSafari } from 'common/Platform';
 import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICoreTerminal } from 'common/Types';
 import { ITerminalAddon, Terminal } from 'xterm';
 import { WebglRenderer } from './WebglRenderer';
 
@@ -29,14 +28,13 @@ export class WebglAddon extends Disposable implements ITerminalAddon {
   constructor(
     private _preserveDrawingBuffer?: boolean
   ) {
-    super();
-  }
-
-  public activate(terminal: Terminal): void {
     if (isSafari && getSafariVersion() < 16) {
       throw new Error('Webgl2 is only supported on Safari 16 and above');
     }
+    super();
+  }
 
+  public activate(terminal: Terminal): void {
     const core = (terminal as any)._core as ITerminal;
     if (!terminal.element) {
       this.register(core.onWillOpen(() => this.activate(terminal)));
diff --git a/demo/client.ts b/demo/client.ts
index 38c4748a0b..7c04bb2a1c 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -250,7 +250,11 @@ function createTerminal(): void {
   addons.serialize.instance = new SerializeAddon();
   addons.fit.instance = new FitAddon();
   addons.unicode11.instance = new Unicode11Addon();
-  addons.webgl.instance = new WebglAddon();
+  try {  // try to start with webgl renderer (might throw on older safari/webkit)
+    addons.webgl.instance = new WebglAddon();
+  } catch (e) {
+    console.warn(e);
+  }
   addons['web-links'].instance = new WebLinksAddon();
   typedTerm.loadAddon(addons.fit.instance);
   typedTerm.loadAddon(addons.search.instance);
@@ -273,22 +277,26 @@ function createTerminal(): void {
   socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/';
 
   addons.fit.instance!.fit();
-  typedTerm.loadAddon(addons.webgl.instance);
-  setTimeout(() => {
-    if (addons.webgl.instance !== undefined) {
+
+  if (addons.webgl.instance) {
+    try {
+      typedTerm.loadAddon(addons.webgl.instance);
+      term.open(terminalContainer);
       setTextureAtlas(addons.webgl.instance.textureAtlas);
       addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
       addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
       addons.webgl.instance.onRemoveTextureAtlasCanvas(e => removeTextureAtlas(e));
+    } catch (e) {
+      console.warn('error during loading webgl addon:', e);
+      addons.webgl.instance.dispose();
+      addons.webgl.instance = undefined;
     }
-  }, 0);
-
-  try { // try-catch to allow the demo to load if webgl is not supported
-    term.open(terminalContainer);
   }
-  catch {
-    addons.webgl.instance = undefined;
+  if (!typedTerm.element) {
+    // webgl loading failed for some reason, attach with DOM renderer
+    term.open(terminalContainer);
   }
+
   term.focus();
 
   addDomListener(paddingElement, 'change', setPadding);