Skip to content

[Bug]: Canvas menu and selection toolbox capture wheel events causing browser zoom instead of canvas zoom #4568

@christian-byrne

Description

@christian-byrne

Custom Node Testing

Frontend Version

v1.25.1

Expected Behavior

When using the new "Standard" canvas navigation mode (introduced in PR #4533), wheel events with Ctrl held should zoom the canvas consistently regardless of mouse position, including when the mouse is over UI elements like the graph canvas menu (bottom-right) or selection toolbox.

Actual Behavior

After the canvas navigation mode PR and v1.25.1 release, when accidentally hovering over the graph canvas menu (bottom-right corner) or the selection toolbox (appears when nodes are selected), wheel events with Ctrl held are captured by these UI elements instead of being passed to the canvas. This causes the browser to zoom the entire page instead of zooming the canvas, breaking the expected navigation experience.

Steps to Reproduce

  1. Set canvas navigation mode to "Standard" (default in v1.25.0+) in Settings
  2. Open any workflow on the canvas
  3. Select one or more nodes to make the selection toolbox appear
  4. Hold Ctrl and scroll wheel while mouse cursor is over the selection toolbox
  5. Observe that the browser zooms instead of the canvas
  6. Alternative: Hold Ctrl and scroll wheel while mouse cursor is over the graph canvas menu (bottom-right corner)
  7. Same issue: browser zoom occurs instead of canvas zoom

Debug Logs

[No terminal logs relevant to this frontend issue]

Browser Logs

[No console errors - this is a wheel event handling issue]

Setting JSON

{
  "Comfy.Canvas.NavigationMode": "standard"
}

What browsers do you use to access the UI?

  • Google Chrome
  • Mozilla Firefox

Other Information

This issue was introduced with the new canvas navigation mode in PR #4533. The problem occurs because:

  1. In "Standard" mode, canvas zoom requires Ctrl + wheel events
  2. UI components like GraphCanvasMenu.vue (positioned at bottom-[10px] right-[10px]) and SelectionToolbox.vue capture wheel events
  3. When these elements have focus or the mouse is over them, the wheel events don't propagate to the canvas
  4. The browser interprets Ctrl + wheel as a page zoom command instead

Affected Components:

  • src/components/graph/GraphCanvasMenu.vue - Canvas controls in bottom-right
  • src/components/graph/SelectionToolbox.vue - Node selection toolbox

Suggested Fix:
These components should either:

  1. Prevent wheel event capture and allow propagation to the canvas
  2. Explicitly forward wheel events to the canvas when Ctrl is held
  3. Use pointer-events: none for wheel events while maintaining click functionality

This issue significantly impacts the user experience with the new standard navigation mode, as users frequently hover over these UI elements while navigating the canvas.

┆Issue is synchronized with this Notion page by Unito

Metadata

Metadata

Labels

area:navigationarea:uiGeneral user interface and experience improvementsverified bugSomething isn't working (confirmed by the team)

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions