perf: add CSS contain:layout contain:style to node inner wrapper

Add layout and style containment to the node inner wrapper div in LGraphNode.vue. This tells the browser it can skip re-layout and re-style of descendant elements when only external layout changes, reducing composite/paint overhead in large node graphs. The outer shell already has contain-layout contain-style; this extends the same containment to the inner content wrapper for tighter isolation.
2026-04-20 14:30:41 +00:00 · 2026-03-14 23:16:25 -07:00
parent 2af3940867
commit 3efb8713dd
3 changed files with 1 additions and 1 deletions
--- a/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png
+++ b/browser_tests/tests/saveImageAndWebp.spec.ts-snapshots/save-image-and-webm-preview-chromium-linux.png
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -76,7 +76,7 @@
      :class="
        cn(
          'flex flex-1 flex-col border border-solid border-transparent bg-node-component-header-surface',
-          'w-(--node-width)',
+          'w-(--node-width) contain-layout contain-style',
          !isRerouteNode && 'min-h-(--node-height) min-w-(--min-node-width)',
          shapeClass,
          hasAnyError && 'ring-4 ring-destructive-background',