Comfy-Org / Comfy-Org/ComfyUI_frontend
Safari: STRING/textarea node widgets flicker and shift over the canvas
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
### Prerequisites
- [x] I am running the latest version of ComfyUI
- [x] I have custom nodes enabled
### What happened?
When ComfyUI is opened remotely in Safari on macOS, STRING widgets—especially multiline textarea-style fields—visibly flicker/jitter and their rectangular bounds appear to shift by small amounts. The graph remains usable, but the repeated movement makes editing text uncomfortable.
The ComfyUI server is running on a Windows machine and is accessed from the Mac over the local network by IP address and port. The same workflow renders normally:
- in a browser on the Windows host;
- in Google Chrome on the same Mac, using the same URL;
- after resetting Safari page zoom to 100% (`Cmd+0`), the issue still occurs.
This strongly suggests a Safari/WebKit-specific interaction between the canvas transform and HTML/Vue DOM widgets rather than a backend or network issue.
Custom nodes are enabled, so this has not yet been isolated with all extensions disabled. However, the browser-only difference is consistent on the same client machine and workflow.
### Steps to Reproduce
1. Run current ComfyUI on another machine with `--listen 0.0.0.0`.
2. From macOS, open the server IP and port in Safari.
3. Load a workflow containing multiline STRING/textarea widgets.
4. View, pan, or zoom the graph and observe the rectangular text widget bounds.
5. Open the same URL and workflow in Chrome on the same Mac.
**Actual:** STRING/textarea widgets flicker or shift slightly in Safari.
**Expected:** DOM-backed widgets remain visually locked to their canvas node, as they do in Chrome.
### How is this affecting you?
Visual/UI issue only
### ComfyUI Frontend Version
1.45.21 (the version currently pinned by ComfyUI master)
### Browser
Safari
### Console Errors
No Safari console capture is currently available.
### Logs
No relevant backend error is emitted; generation and workflow execution are unaffected.
### Additional Context
- Client OS: macOS (exact version not yet captured)
- Server OS: Windows
- Safari page zoom reset to 100% did not help
- Chrome on the same Mac is a reliable workaround
- Current standalone frontend release is 1.48.3, but it has not yet been tested against this Safari reproduction
Potential root cause: fractional CSS transforms and synchronous `ResizeObserver` measurement/writes may cause Safari to repeatedly round and repaint DOM widget geometry out of phase with the canvas transform.
Potential solution: coalesce DOM widget measurements and layout-store writes to one `requestAnimationFrame`, and defer/re-measure them while canvas zoom/pan transforms are active. This appears related to the approaches already proposed in:
- #10473 — throttle `ResizeObserver` during zoom/pan interactions
- #12299 — RAF-batch Vue node `ResizeObserver` writes to `layoutStore`
- #12300 — RAF-batch canvas `ResizeObserver` updates
A Safari/WebKit E2E or focused regression test that tracks widget bounding boxes across successive frames during zoom/pan would help prevent recurrence.
Contributor guide
Research direction
No source file or regression test is named. Start by comparing the canvas transform and HTML/Vue widget ResizeObserver paths, then review the approaches in #10473, #12299, and #12300, especially layoutStore writes. Done means Safari STRING/textarea widgets remain aligned without flicker during pan and zoom, with a focused regression test if feasible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100