From 9fc6a5a27dcbf8723046bf04405cc470d3defb3f Mon Sep 17 00:00:00 2001 From: AustinMroz Date: Tue, 23 Dec 2025 23:29:36 -0800 Subject: [PATCH] Workaround for reload causing node spread (#7751) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #7435 introduced a tricky regression which will cause extremely small levels of zoom with nodes spread far apart when in vue mode. I am able to consistently reproduce this behaviour by - Being in vue mode - Swapping to a different tab so that ComfyUI is in the background - Making a pointless line change to frontend code so that vite forces a reload - Waiting ~1 minute to ensure the reload completes - Swapping back to the ComfyUI tab From testing, if a reload occurs while the tab is backgrounded, the canvas has an uninitialized size of 300x150. This PR proposes falling back to a more sane default width and height of 1920x1080 if it is detected that the canvas element is unitialized. | Before | After | | ------ | ----- | | before | after| This appears to have consistently good results, but second opinions or further testing would be appreciated. A more reasonable option (like skipping this automatic fitView if the canvas has uninitialized size) is likely to be safer, even if it results in a return of edge cases resulting in a graph having no nodes in view after load. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7751-Workaround-for-reload-causing-node-spread-2d36d73d365081b9ae74d5f0e6f436f5) by [Unito](https://www.unito.io) --- src/lib/litegraph/src/DragAndScale.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/lib/litegraph/src/DragAndScale.ts b/src/lib/litegraph/src/DragAndScale.ts index c71fca2d2..d2e35252d 100644 --- a/src/lib/litegraph/src/DragAndScale.ts +++ b/src/lib/litegraph/src/DragAndScale.ts @@ -192,8 +192,14 @@ export class DragAndScale { bounds: ReadOnlyRect, { zoom = 0.75 }: { zoom?: number } = {} ): void { - const cw = this.element.width / window.devicePixelRatio - const ch = this.element.height / window.devicePixelRatio + //If element hasn't initialized (browser tab is in background) + //it has a size of 300x150 and a more reasonable default is used instead. + const [width, height] = + this.element.width === 300 && this.element.height === 150 + ? [1920, 1080] + : [this.element.width, this.element.height] + const cw = width / window.devicePixelRatio + const ch = height / window.devicePixelRatio let targetScale = this.scale if (zoom > 0) {