You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
OS: [Windows]
Browser: [Chrome]
Version: [124.0.6367.78]
Additional context
No response
The text was updated successfully, but these errors were encountered:
paulleonartcalvo
changed the title
Circular flex item in nodes deviate from center
Circular flex item in node erroneously deviates from center on Windows
Apr 25, 2024
paulleonartcalvo
changed the title
Circular flex item in node erroneously deviates from center on Windows
Node rendering inconsistent between Mac and Windows
Apr 25, 2024
paulleonartcalvo
changed the title
Node rendering inconsistent between Mac and Windows
Node rendering inconsistent between Mac and Windows with Chrome
Apr 25, 2024
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
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
The text was updated successfully, but these errors were encountered: