mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
fix: resolve node text bleed-through by isolating stacking contexts (#10022)
## Summary - Move `contain-layout contain-style` from the outer node container to the inner wrapper to prevent CSS containment from interfering with inter-node compositing - Add `isolation: isolate` to the outer container for explicit stacking context isolation - Fixes #9988 ## Root Cause Originally, PR [#5169](https://github.com/Comfy-Org/ComfyUI_frontend/pull/5169) (`57db10f`, 2025-08-23) applied all three containment properties to the outer node container: ``` contain-layout contain-style contain-paint ``` `contain-paint` ensured each node's painting was clipped to its own boundaries, guaranteeing render isolation between sibling nodes. Later, PR [#6289](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6289) (`6e4471ad`, 2025-10-28) removed `contain-paint` to fix a node sizing issue — likely because `contain-paint` clips content to the element's padding box, which would clip selection overlays and footer tabs that extend beyond the node boundary via negative insets. Removing `contain-paint` while keeping `contain-layout contain-style` on the outer container broke paint isolation between nodes. Without paint containment, the browser's compositor no longer treated each node as an isolated painting unit, allowing text from lower z-index nodes to visually bleed through higher z-index nodes. ## Fix 1. **Move containment inward**: `contain-layout contain-style` is moved from the outer container to the inner wrapper (`node-inner-wrapper`). This preserves layout/style containment performance benefits while keeping them scoped to the node body — away from the stacking context boundary between sibling nodes. 2. **Explicit isolation**: `isolation: isolate` is added to the outer container. While `transform` + `z-index` already create a stacking context, `isolation: isolate` provides an unambiguous signal to the browser's compositor to treat each node as an isolated compositing unit — replacing the paint isolation role that `contain-paint` previously served, without clipping overlays. ## Red-Green Verification | Commit | Status | Purpose | |--------|--------|---------| | [`feb8555`](https://github.com/Comfy-Org/ComfyUI_frontend/commit/feb855501) `test:` | 🔴 Red (verified locally) | Test asserts `isolate` on outer container and `contain-layout contain-style` on inner wrapper only — fails against current main | | [`c47f89e`](https://github.com/Comfy-Org/ComfyUI_frontend/commit/c47f89ed2) `fix:` | 🟢 Green (CI: Tests Unit passing) | Moves containment to inner wrapper, adds `isolation: isolate` — test passes | **Local red verification:** ``` AssertionError: expected [ 'group/node', 'lg-node', …(9) ] to include 'isolate' ❯ src/renderer/extensions/vueNodes/components/LGraphNode.test.ts:264:26 ``` ## Test Plan - [x] CI red on test-only commit (verified locally — test fails without fix) - [x] CI green on fix commit (CI: Tests Unit passes) - [ ] Place a String Literal node with long text on the canvas - [ ] Place a Load Image node (with an image loaded) overlapping the String Literal - [ ] Verify text from the String Literal does NOT bleed through the Load Image node - [ ] Verify node selection outlines, error borders, and footer tabs render correctly --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
:data-collapsed="isCollapsed || undefined"
|
||||
:class="
|
||||
cn(
|
||||
'group/node lg-node absolute text-sm',
|
||||
'group/node lg-node absolute isolate text-sm',
|
||||
'flex min-w-(--min-node-width) flex-col contain-layout contain-style',
|
||||
cursorClass,
|
||||
isSelected && 'outline-node-component-outline',
|
||||
|
||||
Reference in New Issue
Block a user