langgenius / langgenius/dify

Workflow canvas dot grid renders above nodes, configuration panels, and menus in Dify 1.17.0

Open
#41,451 3 comments 1 reaction 0 assignees View on GitHub
🐞 bug 1.17.0
Dominant language
TypeScript
Stars
156k
Forks
24.6k
Avg merge
20h 50m
Merged PRs (30d)
586

Description

### Self Checks

- [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542).
- [x] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general).
- [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones.
- [x] I confirm that I am using English to submit this report, otherwise it will be closed.
- [x] 【中文用户 & Non English User】请使用英语提交,否则会被关闭 :)
- [x] Please do not modify this template :) and fill in all the required fields.

### Dify version

1.17

### Cloud or Self Hosted

Self Hosted (Docker)

### Steps to reproduce

### Self Checks

- [x] I have read the Contributing Guide and Language Policy.
- [x] This is only for a bug report. If I would like to ask a question, I will use Discussions.
- [x] I have searched for existing issues, including closed ones.
- [x] I confirm that I am using English to submit this report.
- [x] I have not modified the required sections of the bug report template.

### Dify version

1.17.0

### Cloud or Self Hosted

Self Hosted (Docker)

### Steps to reproduce

1. Upgrade an existing self-hosted Dify installation from 1.14.x to 1.17.0.
2. Use `langgenius/dify-web:1.17.0` and `langgenius/dify-api:1.17.0`.
3. Open **Studio** and create or open a Workflow application.
4. Select an LLM node so that the node configuration panel opens on the right.
5. Open the variable inspector panel at the bottom.
6. Observe the workflow canvas dot-grid background across the page.

Deployment details:

- Deployment: Docker Compose through aaPanel
- Reverse proxy: aaPanel/Nginx
- Dify UI language: Turkish
- Theme: Light
- Client OS: macOS
- Browser and version: Google Chrome 151.0.7922.174

### ✔️ Expected Behavior

✔️ Expected Behavior

The dotted workflow background should be rendered only inside the canvas and behind workflow nodes. Node cards, the right-side configuration panel, the bottom variable inspector, toolbars, menus, and other overlay surfaces should have their normal opaque backgrounds and remain clearly readable.

### ❌ Actual Behavior

Actual Behavior

The canvas dot grid is rendered above or through nearly every surface in the Studio editor. The dots cover workflow nodes, the LLM configuration panel on the right, the variable inspector at the bottom, toolbars, and menu areas.

This makes the entire editor difficult to read and suggests that the React Flow background/SVG is in an incorrect stacking context or that panel backgrounds are unexpectedly transparent. The issue is visible immediately after opening the workflow editor.

The left Studio navigation sidebar is not affected, while the canvas area and the panels layered over it are affected.

### Screenshot

Please drag and drop `Screenshot 2026-08-28 at 16.12.04.png` here before submitting the issue.

### Additional context

The deployment was upgraded from Dify 1.14.x to 1.17.0 while preserving the existing database and storage volumes. Both the API and web services are configured to use the `1.17.0` image tag.

Relevant frontend feature flags in this deployment:

```env
NEXT_PUBLIC_ENABLE_AGENT_V2=true
NEXT_PUBLIC_ENABLE_FEATURE_PREVIEW=true
EXPERIMENTAL_ENABLE_VINEXT=false
```

No similar issue describing the workflow dot grid rendering over all Studio panels was found in the current 1.17.0 feedback milestone.

Image

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in Studio with a Workflow application on Dify 1.17.0, following the upgrade and panel-opening steps in the report. Inspect the workflow canvas dot-grid rendering and the stacking or background behavior of the node, configuration, variable inspector, toolbar, and menu surfaces. Done means the dots remain inside the canvas and behind nodes while all overlay panels stay readable.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.