-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The edge path doesn't work well with the CSS scale. #4266
Comments
Why do you want to scale the container? If you want to adjust the viewport, you should use |
Thanks for your reply! |
React Flow needs the dimensions of the flow to figure out things - supporting scaling by transforms would add an immens overhead to this, because it would have to be respected in many internal calculations. You can however resize the flow component and adjust the zoom level of the viewport at the same time to achieve the same effect. (napkin math: halving the size while halving the zoom level should yield the same same effect as scaling) |
Describe the Bug
I'm trying to add the CSS style property
transform: scale(0.7)
to the reactflow component, but the edge path is shifted.I don't know where the reason comes from. Maybe it's a react issue or an SVG issue?
Thanks!
Your Example Website or App
https://stackblitz.com/edit/vitejs-vite-q272d9?file=src%2FApp.jsx
Steps to Reproduce the Bug or Issue
Just like what's in the repro demo.
Expected behavior
You can click the button on the demo page, if scaling it after a while, it goes well, without shifting.
Screenshots or Videos
No response
Platform
Additional context
No response
The text was updated successfully, but these errors were encountered: