The edge path doesn't work well with the CSS scale.

[42arch]

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

• OS: [Windows]
• Browser: [Chrome]
• Version: [124.0.6367.63]

Additional context

No response

[moklick]

Why do you want to scale the container? If you want to adjust the viewport, you should use setViewport.

[42arch]

Thanks for your reply！
I have a special situation where the position of the ReactFlow layout is pre-calculated, and it is aligned with other components (ReactFlow's sibling component). The setViewport can only adjust the flow's viewport, but I want both the flow component and the other components to be adjusted together. So I used transform: scale() to achieve it.