[joy-ui][Circular Progress] Svg progress bar is misaligned and its length changes when zoomed in Safari

Steps to reproduce

Link to live example: https://mui.com/joy-ui/react-circular-progress/#introduction

Steps:

1. Open link on Safari.
2. Zoom in or zoom out.

Current behavior

1. Progress bar is misaligned
2. The progress has changed.

Expected behavior

1. Progress bar should be centered.
2. The progress should not change.

Context

I think the misalignment issue is caused by Safari miscalculating the transform and transform origin when zooming.

How about adding the animation to the top layer, like material-ui's Progress?
I think it would be possible to apply the rotation transform to the parent svg element instead of the circle element, or to split the Progress and Track into two svg elements.

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Circular Progress align