Comfy-Org / Comfy-Org/ComfyUI_frontend

Safari: STRING/textarea node widgets flicker and shift over the canvas

Open
#13,704 1 comment 0 reactions 0 assignees View on GitHub
area:dom-widgets area:ui Potential Bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.