Bug reportSep 17, 2026· 0:23· 15 views
React Flow 12.11.6: edges miss handles when the flow is inside a CSS transform
0:23 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumhandle position calculation / CSS transform matrix handling
os: macOSbrowser: Chromium 151.0.7922.34library: @xyflow/react 12.11.6viewport: 1280x720
Repro steps
- 1.Render a standard React Flow instance with Node A connected to Node B via an edge (control case).
- 2.Render an identical React Flow instance wrapped inside an ancestor container with CSS 'transform: scale(1.5)'.
- 3.Inspect the edge alignment relative to node connection handles in both flow instances.
Expected
Edge endpoints should accurately snap to the source handle of Node A and target handle of Node B regardless of ancestor CSS transforms.
Actual
When placed inside an ancestor with 'transform: scale(1.5)', the edge path is offset and fails to connect to the node handles, rendering detached in empty space.
Evidence
visualControl instance '1. No ancestor transform — edge meets the handles' renders edge correctly attached from Node A to Node B at t=1.0s.
visualTransformed instance '2. Inside transform: scale(1.5) — edge misses the handles' displays the connecting edge offset and detached from both Node A and Node B handles at t=1.0s and t=9.0s.
Issue markdown (copy-paste ready)
### Summary When a React Flow canvas (@xyflow/react 12.11.6) is embedded within an ancestor element that has a CSS transform applied (e.g., `transform: scale(1.5)`), edges fail to connect to node handles and render at offset coordinates. ### Steps to Reproduce 1. Render a React Flow canvas with Node A connected to Node B. 2. Wrap the React Flow component in a container element styled with `transform: scale(1.5)`. 3. Observe the positioning of the rendered edge relative to Node A and Node B handles. ### Expected Result Edges should correctly calculate handle coordinates and attach to handles irrespective of ancestor CSS scale transforms (as seen in the unscaled control case). ### Actual Result Edge path coordinates are misaligned and float disconnected away from the node handles. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →