From a9ebd74ca844291af9a482001eba2fc280be1e27 Mon Sep 17 00:00:00 2001 From: dovvnloading Date: Fri, 14 Aug 2026 14:04:35 -0400 Subject: [PATCH] Keep node cards and connection lines on the same compositing path Node cards move as GPU-composited layers - the browser promotes them on its own once their position changes every frame of a drag - while the connection lines live in an SVG layer that is re-rasterized on the main thread. Those are two different routes to the screen, and when they fall a frame out of step the connection visibly trails or stutters against the node it is attached to. The thin bright stroke on a near-black background makes every misstep obvious in the dark theme; the identical misstep is nearly invisible against the light theme, which is why the problem was reported as dark-mode-only while measurements of the page's internal geometry kept showing the two perfectly attached. Declaring will-change on both the node wrappers and the connection layer makes the browser assign both to the compositing path from the first frame, instead of flipping nodes onto a separate one partway through a gesture. Co-Authored-By: Claude Fable 5 --- web_ui/src/app/styles.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/web_ui/src/app/styles.css b/web_ui/src/app/styles.css index 40f29bb..39c8c39 100644 --- a/web_ui/src/app/styles.css +++ b/web_ui/src/app/styles.css @@ -403,6 +403,26 @@ body, font-size: var(--gl-node-font-size, 11px); } +/* Dark-theme drag-lag fix: node cards move as GPU-composited layers (the + browser promotes them on its own once their transform changes every + frame of a drag), while the connection lines live in an SVG that gets + re-rasterized on the main thread. Those are two different routes to the + screen, and when they fall a frame out of step the connection visibly + trails or stutters against the node it is attached to. The 1.5px stroke + on a near-black background makes every misstep stark in dark mode; the + identical misstep is nearly invisible against the light theme, which is + why the artifact reads as dark-only. Declaring will-change on BOTH the + node wrappers and the connection layer makes the browser put them on the + same compositing path from the first frame, instead of flipping the + nodes onto a separate one mid-gesture. */ +.scene-canvas .react-flow__node { + will-change: transform; +} + +.scene-canvas .react-flow__edges { + will-change: transform; +} + .scene-canvas .react-flow__edge-path { stroke: var(--gl-surface-border-strong, var(--gl-surface-text-muted)); stroke-width: 1.5;