Skip to content

fix(Spinner): move animation to <g> element to prevent wobble on Safari - #8619

Open
Kavi274 wants to merge 2 commits into
primer:mainfrom
Kavi274:fix/spinner-wobble-safari
Open

Kavi274 wants to merge 2 commits into
primer:mainfrom
Kavi274:fix/spinner-wobble-safari

Conversation

@Kavi274

@Kavi274 Kavi274 commented Oct 26, 2026

Copy link
Copy Markdown

Summary

Closes #8423

The Spinner component was applying the CSS rotation animation directly to
the <svg> element, which caused visual wobbling on Safari (macOS Tahoe)
due to inconsistent transform-origin handling in WebKit.

Fix

  • Wrapped <circle> and <path> in a <g> group element
  • Moved the animation class from <svg> to the <g> element
  • Added transform-origin: 50% 50% to ensure rotation is centered

Result

The spinner now rotates smoothly around its center point on Safari
without any horizontal wobbling.

@Kavi274
Kavi274 requested a review from a team as a code owner October 26, 2026 03:54
@Kavi274
Kavi274 requested a review from llastflowers October 26, 2026 03:54
@changeset-bot

changeset-bot Bot commented Oct 26, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7262130

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

This branch was successfully deployed

1 active deployment
github-pages — 72621302 Deployed Oct 26, 2026 by Kavi274 via deploy-preview #30190
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Spinner "wobbles" on Safari (macOS Tahoe) - also I have fix for it

1 participant