xyflow / xyflow

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.
https://xyflow.com
MIT License
21.54k stars 1.43k forks source link

Node rendering inconsistent between Mac and Windows with Chrome #4208

Open paulleonartcalvo opened 3 weeks ago

paulleonartcalvo commented 3 weeks ago

Describe the Bug

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

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%

{
          id: n,
          type: data.type,
          data,
          position: {
            x: 0
            y: 0,
          },
          style: {
            height: 48,
            width: 48,
            padding: 2,
            outline: "3px solid yellow",
            borderRadius: "50%",
            color: "#fff",
          },
          connectable: false,
        }

2) Create the custom node being used which creates a circle of 100% parent width and height, with display flex and center its contents

function MyNode(...props) {
  return <div style={{ height: '100%', width: '100%', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' background: 'red'}}> 
   {...}
  </div>
}

3) Add a smaller circle to the center of the previous circle

function MyNode(...props) {
  return <div style={{ height: '100%', width: '100%', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'red'}}> 
   <div style={{width: '75%', height: '75%', borderRadius: '50%', background: 'blue' }} />
  </div>
}

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)

Image 4-25-24 at 2 40 AM

On Windows (bad)

image

Provided sandbox on Mac (good)

Image 4-25-24 at 3 02 AM

Provided sandbox on Windows (bad)

image

At 100% (default) browser zoom on Windows chrome

image

At 90% browser zoom on Windows chrome

image

At 75% browser zoom on Windows chrome

image

At 67% browser zoom on Windows chrome

image

Platform

Additional context

No response

moklick commented 1 week ago

Not sure if we can do anything about it. Does this also happen when you are not using fitView?