search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.32k stars 32.12k forks source link

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

Open maakcode opened 3 weeks ago

maakcode commented 3 weeks ago

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.
스크린샷 2024-08-22 11 21 23

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

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

Search keywords: Circular Progress align

siriwatknp commented 3 weeks ago

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI