Node icon disappears when background opacity is set to 100%
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 8d 9h
- Merged PRs (30d)
- 7
Description
When a node's background opacity is raised to 100%, the node icon is no longer visible. The icon is rendered as the node's `backgroundImage`, and at full background opacity the solid background color obscures it, leaving a plain colored node with no icon.
## Environment
- All environments, browser-based
- Any node type with a custom background opacity applied via the style editor
## Steps to Reproduce
1. Open the vertex style editor for a node type with an icon
2. Raise the background opacity to 100%
3. Observe the node in the graph
## Expected Behavior
The icon remains visible regardless of background opacity.
## Actual Behavior
The icon disappears once background opacity is high enough that the background color fully covers it.
## Notes
Solutions may be tricky and need prototyping to explore options (tracked in a child spike). One simple candidate: switch the icon to white or black once opacity passes some threshold, so it stays legible against the solid background. Other approaches (e.g. compositing the icon above the background layer, or a separate icon-opacity control) should be weighed during prototyping.
## Related Issues
- Related to #1943 — Improved Style Options roadmap (icon/label styling model)
---
> [!IMPORTANT]
> Internal only — this issue is maintained by the core team and is not accepting external contributions.
Contributor guide
Research direction
Start with the vertex style editor and the node rendering path that uses the icon as a backgroundImage. Review the child spike and compare the proposed compositing, contrast, and icon-opacity approaches. Done means the icon remains visible at 100% background opacity across node types without regressing normal opacity behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 20/100