search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.94k stars 1.53k forks source link

[BUG] - Circular Progress animation off-centre in Safari on macOS #1747

Open jasongerbes opened 1 year ago

jasongerbes commented 1 year ago

NextUI Version

latest - docs

Describe the bug

The transform origin of Circular Progress component seems to be off-centre in Safari (17.0) on macOS Sonoma (14.0).

This causes a wobbly animation, as shown in the attached GIF.

Your Example Website or App

https://nextui.org/docs/components/circular-progress

Steps to Reproduce the Bug or Issue

  1. Open the Circular Progress docs page in Safari on macOS
  2. Observe the animation of the Circular Progress component's examples

Expected behavior

As a user, I expect the Circular Progress component to animate smoothly

Screenshots or Videos

NextUI spinner

Operating System Version

macOS

Browser

Safari

szbphoto commented 1 year ago

Hi, works fine for me. iOS 17 in Safari.

jasongerbes commented 1 year ago

Hey @szbphoto, this also works fine for me in Safari on iOS. This seems to be an issue specific to Safari on macOS

ksavblik commented 1 year ago

Also happens on iOS 16 Safari when label is used

fabpico commented 2 months ago

Happening on Windows 11, Chrome Version 126.0.6478.127. https://storybook.nextui.org/?path=/story/components-circularprogress--default Animation