diff --git a/addons/addon-webgl/src/CellColorResolver.ts b/addons/addon-webgl/src/CellColorResolver.ts
index afeb7245..a6acb996 100644
--- a/addons/addon-webgl/src/CellColorResolver.ts
+++ b/addons/addon-webgl/src/CellColorResolver.ts
@@ -42,7 +42,7 @@ export class CellColorResolver {
    * Resolves colors for the cell, putting the result into the shared {@link result}. This resolves
    * overrides, inverse and selection for the cell which can then be used to feed into the renderer.
    */
-  public resolve(cell: ICellData, x: number, y: number, deviceCellWidth: number, deviceCellHeight: number): void {
+  public resolve(cell: ICellData, x: number, y: number, deviceCellWidth: number): void {
     this.result.bg = cell.bg;
     this.result.fg = cell.fg;
     this.result.ext = cell.bg & BgFlags.HAS_EXTENDED ? cell.extended.ext : 0;
@@ -63,12 +63,6 @@ export class CellColorResolver {
       const lineWidth = Math.max(1, Math.floor(this._optionService.rawOptions.fontSize * this._coreBrowserService.dpr / 15));
       $variantOffset = x * deviceCellWidth % (Math.round(lineWidth) * 2);
     }
-    if ($variantOffset === 0) {
-      if ((code >= 0x2591 && code <= 0x2593) || (code >= 0x1FB8C && code <= 0x1FB94)) {
-        $variantOffset = ((x * deviceCellWidth) % 2) * 2 + ((y * deviceCellHeight) % 2);
-      }
-    }
-
     // Apply decorations on the bottom layer
     this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
       if (d.backgroundColorRGB) {
diff --git a/addons/addon-webgl/src/WebglRenderer.ts b/addons/addon-webgl/src/WebglRenderer.ts
index bd98ce60..6f365cc9 100644
--- a/addons/addon-webgl/src/WebglRenderer.ts
+++ b/addons/addon-webgl/src/WebglRenderer.ts
@@ -13,7 +13,7 @@ import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeS
 import { CharData, IBufferLine, ICellData } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
-import { Attributes, Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
+import { Attributes, Content, ExtFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { GlyphRenderer } from './GlyphRenderer';
@@ -26,6 +26,7 @@ import { Emitter, EventUtils } from 'common/Event';
 import { addDisposableListener } from 'vs/base/browser/dom';
 import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
+import { blockPatternCodepoints } from './customGlyphs/CustomGlyphDefinitions';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
@@ -478,7 +479,12 @@ export class WebglRenderer extends Disposable implements IRenderer {
         i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
 
         // Load colors/resolve overrides into work colors
-        this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width, this.dimensions.device.cell.height);
+        this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width);
+        if ((this._cellColorResolver.result.ext & ExtFlags.VARIANT_OFFSET) === 0 && blockPatternCodepoints.has(code)) {
+          const variantOffset = ((x * this.dimensions.device.cell.width) % 2) * 2 + ((row * this.dimensions.device.cell.height) % 2);
+          this._cellColorResolver.result.ext &= ~ExtFlags.VARIANT_OFFSET;
+          this._cellColorResolver.result.ext |= (variantOffset << 29) & ExtFlags.VARIANT_OFFSET;
+        }
 
         // Override colors for cursor cell
         if (isCursorVisible && row === cursorY) {
diff --git a/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts b/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts
index 79efc306..9998363c 100644
--- a/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts
+++ b/addons/addon-webgl/src/customGlyphs/CustomGlyphDefinitions.ts
@@ -820,6 +820,20 @@ export const customGlyphDefinitions: { [index: string]: CustomGlyphCharacterDefi
   // #endregion
 };
 
+export const blockPatternCodepoints = new Set<number>();
+for (const [char, definition] of Object.entries(customGlyphDefinitions)) {
+  if (!definition) {
+    continue;
+  }
+  const parts = Array.isArray(definition) ? definition : [definition];
+  if (parts.some(part => part.type === CustomGlyphDefinitionType.BLOCK_PATTERN)) {
+    const codepoint = char.codePointAt(0);
+    if (codepoint !== undefined) {
+      blockPatternCodepoints.add(codepoint);
+    }
+  }
+}
+
 /**
  * Generates a drawing function for sextant characters. Sextants are a 2x3 grid where each cell
  * can be on or off.