mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-13 09:00:16 +00:00
8c93567019
## Summary When many nodes are rendered in the transform container, both zoom and pan can cause FPS drops because the browser re-rasterizes all visible content at the new transform. `will-change: transform` tells the browser to keep the layer as a GPU texture and skip re-rasterization during active interaction, restoring visual quality only after settling. - Add pointer drag detection so `will-change: transform` covers pan in addition to zoom. Without this, dragging with 256+ nodes causes jank as the browser re-rasterizes the entire layer on every frame of the pan. - Fix settleDelay from 16ms to 256ms. At 16ms the debounce fires between consecutive wheel events (~50ms apart on a physical mouse), causing `will-change` to toggle on/off rapidly. Each toggle forces the browser to promote/demote the compositor layer, which is more expensive than not having the optimization at all. - Replace scoped CSS with Tailwind `will-change-transform`. - Remove per-node `will-change: transform` on `.lg-node`. Promoting each node to its own compositor layer (256 nodes = 256 GPU textures) increases memory pressure and compositing overhead, making performance worse than a single promoted container. - Previously, the virtual DOM of Nodes was updated during zooming and dragging, but now this update is avoided through some techniques. - Using the 3D versions of scale and translate can provide a smoother experience when dealing with a large number of nodes. ## Test plan - [x] Unit tests updated and passing - [x] Manual: verify during both zoom and pan - [x] Manual: compare pan FPS with 256 nodes before/after ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9649-perf-detect-pointer-drag-in-useTransformSettling-for-pan-optimization-31e6d73d3650818bb2c3ccd01a465140) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>