diff --git a/addons/xterm-addon-webgl/README.md b/addons/xterm-addon-webgl/README.md
index a431170f..5dee6b62 100644
--- a/addons/xterm-addon-webgl/README.md
+++ b/addons/xterm-addon-webgl/README.md
@@ -2,7 +2,6 @@
 
 An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL2-based renderer. This addon requires xterm.js v4+.
 
-
 ### Install
 
 ```bash
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index 13dceae6..a7e92f94 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -439,9 +439,8 @@ export class WebglCharAtlas implements IDisposable {
     if (underline) {
       this._tmpCtx.save();
       const lineWidth = Math.max(1, Math.floor(this._config.fontSize * window.devicePixelRatio / 15));
-      // When the width is odd, draw at 0.5 position. Offset by an additional 1 dpr to bring the
-      // underline closer to the character
-      const yOffset = (lineWidth % 2 === 1 ? 0.5 : 0) + window.devicePixelRatio;
+      // When the line width is odd, draw at a 0.5 position
+      const yOffset = lineWidth % 2 === 1 ? 0.5 : 0;
       this._tmpCtx.lineWidth = lineWidth;
 
       // Underline color
@@ -463,9 +462,9 @@ export class WebglCharAtlas implements IDisposable {
       this._tmpCtx.beginPath();
       const xLeft = padding;
       const xRight = padding + this._config.scaledCellWidth;
-      const yTop = Math.ceil(padding + this._config.scaledCharHeight - lineWidth) - yOffset;
-      const yMid = padding + this._config.scaledCharHeight - yOffset;
-      const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth) - yOffset;
+      const yTop = Math.ceil(padding + this._config.scaledCharHeight) - yOffset;
+      const yMid = padding + this._config.scaledCharHeight + lineWidth - yOffset;
+      const yBot = Math.ceil(padding + this._config.scaledCharHeight + lineWidth * 2) - yOffset;
       switch (this._workAttributeData.extended.underlineStyle) {
         case UnderlineStyle.DOUBLE:
           this._tmpCtx.moveTo(xLeft, yTop);
@@ -528,8 +527,9 @@ export class WebglCharAtlas implements IDisposable {
       this._tmpCtx.restore();
 
       // Draw stroke in the background color for non custom characters in order to give an outline
-      // between the text and the underline
-      if (!customGlyph) {
+      // between the text and the underline. Only do this when font size is >= 12 as the underline
+      // looks odd when the font size is too small
+      if (!customGlyph && this._config.fontSize >= 12) {
         // This only works when transparency is disabled because it's not clear how to clear stroked
         // text
         if (!this._config.allowTransparency && chars !== ' ') {
diff --git a/src/browser/renderer/DevicePixelObserver.ts b/src/browser/renderer/DevicePixelObserver.ts
index 611eb910..caf1b21d 100644
--- a/src/browser/renderer/DevicePixelObserver.ts
+++ b/src/browser/renderer/DevicePixelObserver.ts
@@ -24,10 +24,12 @@ export function observeDevicePixelDimensions(element: HTMLElement, callback: (de
       return;
     }
 
-    callback(
-      entry.devicePixelContentBoxSize[0].inlineSize,
-      entry.devicePixelContentBoxSize[0].blockSize
-    );
+    // Fire the callback, ignore events where the dimensions are 0x0 as the canvas is likely hidden
+    const width = entry.devicePixelContentBoxSize[0].inlineSize;
+    const height = entry.devicePixelContentBoxSize[0].blockSize;
+    if (width > 0 && height > 0) {
+      callback(width, height);
+    }
   });
   observer.observe(element, { box: ['device-pixel-content-box'] } as any);
   return toDisposable(() => observer?.disconnect());