diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png
index 882088512..2cada041d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png
index d85e98d13..45b0e0369 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-out-high-zoom-speed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png
index 9a7dc88c1..49a154852 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/zoomed-very-far-out-chromium-linux.png differ
diff --git a/src/components/graph/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index 47226d9e5..891b5a327 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -30,7 +30,6 @@ const widgets = computed(() =>
   )
 )
 
-const DEFAULT_MARGIN = 10
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
@@ -49,7 +48,7 @@ const updateWidgets = () => {
 
     widgetState.visible = visible
     if (visible) {
-      const margin = widget.options.margin ?? DEFAULT_MARGIN
+      const margin = widget.margin
       widgetState.pos = [node.pos[0] + margin, node.pos[1] + margin + widget.y]
       widgetState.size = [
         (widget.width ?? node.width) - margin * 2,
diff --git a/src/scripts/domWidget.ts b/src/scripts/domWidget.ts
index 808799a1d..78a7ce6bd 100644
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -1,4 +1,4 @@
-import { LGraphNode } from '@comfyorg/litegraph'
+import { LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type {
   ICustomWidget,
   IWidget,
@@ -27,6 +27,8 @@ export interface BaseDOMWidget<V extends object | string>
   readonly node: LGraphNode
   /** Whether the widget is visible. */
   isVisible(): boolean
+  /** The margin of the widget. */
+  margin: number
 }
 
 /**
@@ -86,6 +88,7 @@ export const isComponentWidget = <V extends object | string>(
 abstract class BaseDOMWidgetImpl<V extends object | string>
   implements BaseDOMWidget<V>
 {
+  static readonly DEFAULT_MARGIN = 10
   readonly type: 'custom'
   readonly name: string
   readonly options: DOMWidgetOptions<V>
@@ -121,6 +124,10 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
     this.callback?.(this.value)
   }
 
+  get margin(): number {
+    return this.options.margin ?? BaseDOMWidgetImpl.DEFAULT_MARGIN
+  }
+
   isVisible(): boolean {
     return (
       !_.isNil(this.computedHeight) &&
@@ -130,7 +137,27 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
     )
   }
 
-  draw(): void {
+  draw(
+    ctx: CanvasRenderingContext2D,
+    _node: LGraphNode,
+    widget_width: number,
+    y: number,
+    widget_height: number,
+    lowQuality?: boolean
+  ): void {
+    if (this.options.hideOnZoom && lowQuality) {
+      // Draw a placeholder rectangle
+      const originalFillStyle = ctx.fillStyle
+      ctx.fillStyle = LiteGraph.WIDGET_BGCOLOR
+      ctx.rect(
+        this.margin,
+        y,
+        widget_width - this.margin * 2,
+        (this.computedHeight ?? widget_height) - this.margin
+      )
+      ctx.fill()
+      ctx.fillStyle = originalFillStyle
+    }
     this.options.onDraw?.(this)
   }