React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
When using padding on a node with width === height and borderRadius: '50%', subsequent concentric circles within the node are slightly off-center. It renders fine on Mac but not on Windows. I replicated the bug in the code sandbox and attacked screenshots showing how the element inspections show the circle is off center. It's very subtle but you can see its definitely there. The gap between the inner and outer radius is smaller at the 120 degree mark.
I noticed that altering the actual browser window zoom level seems to exacerbate this effect, though all the screenshots I provided were at browser default 100% zoom level
The inner circle is not centered depending on the viewing platform.
Expected behavior
I expect that with the styling above, the circles are perfectly concentric and the distance between the inner radius and outer radius is consistent across every point along the circumferences.
Describe the Bug
When using padding on a node with
width
===height
andborderRadius: '50%'
, subsequent concentric circles within the node are slightly off-center. It renders fine on Mac but not on Windows. I replicated the bug in the code sandbox and attacked screenshots showing how the element inspections show the circle is off center. It's very subtle but you can see its definitely there. The gap between the inner and outer radius is smaller at the 120 degree mark.I noticed that altering the actual browser window zoom level seems to exacerbate this effect, though all the screenshots I provided were at browser default 100% zoom level
I am running reactflow@11.11.1
Your Example Website or App
Sanbox
Steps to Reproduce the Bug or Issue
1) Create a Node with padding, equal sides, and a border radius of 50%
2) Create the custom node being used which creates a circle of 100% parent width and height, with display flex and center its contents
3) Add a smaller circle to the center of the previous circle
The inner circle is not centered depending on the viewing platform.
Expected behavior
I expect that with the styling above, the circles are perfectly concentric and the distance between the inner radius and outer radius is consistent across every point along the circumferences.
Screenshots or Videos
On Mac (good)
On Windows (bad)
Provided sandbox on Mac (good)
Provided sandbox on Windows (bad)
At 100% (default) browser zoom on Windows chrome
At 90% browser zoom on Windows chrome
At 75% browser zoom on Windows chrome
At 67% browser zoom on Windows chrome
Platform
Additional context
No response