Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#8,423 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the Spinner component and reproduce the issue at the linked Primer spinner documentation page in Safari on macOS. Compare its SVG structure and animation with the proposed grouping and transform-origin approach; done means the spinner stays visually fixed while rotating in Safari without regressing other browsers.

Written by the indexing model from the issue text.

Description

bug component: Spinner react
Description

Spinner wobbles on Safari, but there is a solution

Hi, I thought my mind was playing an optical illusion trick on me at first, but I noticed that the Spinner component embedded inside the "Merge Pull Request" button was "wobbling".

By wobbling, I meant that the circle wasn't staying in exactly the same position as it rotated - it seemed to move ever so slightly to the left and to the right.

I recorded a video of the button, watched closely and confirmed that it wobbled from left to right - I even got ffmpeg to turn the screen recording video into frames that I then fed to ChatGPT to analyse, and it confirmed what I suspected.

I then went further and drew some vertical lines in CSS to act as rulers so I could double-check it.

It then occurred to me that perhaps this was a bug with Safari and not with Google Chrome. I checked Google Chrome and there was no wobble. Was this a bug with Safari (or as it is sometimes called these days, the new IE)?

Fear not, there is a solution

I managed to discover your UI kit and the spinner component there:

https://primer-docs-preview.github.com/product/components/spinner/#custom-size

Which gave me a suitable place to replicate the error, as well as try out some ideas for fixing it.

I discovered that it turns out that the entire SVG element is being rotated by CSS. I then had a chinwag with ChatGPT and it suggested a few ideas, one of which was to wrap the circle and path elements in a g element (group in SVG), apply the animation css class on the g element instead of the svg element, and crucially, add this CSS rule to the g class:

transform-origin: 50% 50%;

The html for the spinner should look like this:

<svg
    height="64px"
    width="64px"
    viewBox="0 0 16 16"
    fill="none"
    aria-hidden="true"
    aria-labelledby="_R_6beinpfiv5ujb_"
    class=""
    style="animation-delay: -574ms; transform-origin: 50% 50%"
>
    <g
        class="prc-Spinner-SpinnerAnimation-tutJZ"
        style="transform-origin: 50% 50%"
    >
        <circle
            cx="8"
            cy="8"
            r="7"
            stroke="currentColor"
            stroke-opacity="0.25"
            stroke-width="2"
            vector-effect="non-scaling-stroke"
        ></circle>
        <path
            d="M15 8a7.002 7.002 0 00-7-7"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            vector-effect="non-scaling-stroke"
        ></path>
    </g>
</svg>

You can paste that in and try it out. In short, the fix is to wrap the circle and path in a g element, put the spinner css class on the g element instead, and then add the transform-origin css property to the g class.

I will let you triage this as appropriate, and I will go back to calculating what the future price of a Burrito will be 3 months from now (many factors in play).

https://github.com/user-attachments/assets/ee1543a0-9919-4d5b-b266-4256751ca40e

https://github.com/user-attachments/assets/a7e71945-461f-493b-87a9-1dba37630353

Smooth work, lifetime peace.

Steps to reproduce
  1. Find a human with an Apple Mac (MacBook, iMac, or even once of those beefy Studio Maxes - lucky folk) and a Retina screen display - you want the Retina screen display to really see the wobble in action.
  2. Get them to open Safari (not Chrome, it has to be Safari).
  3. Get them to visit https://primer-docs-preview.github.com/product/components/spinner/#custom-size
  4. Now, if you have good eyeballs, you can notice that the spinner is "wobbling". To confirm this, you can draw some lines using CSS to act as vertical rulers, and position them flush with the edges of the spinner. Then experience the wobble in 2D.
  5. Now try opening the same link in Google Chrome. No wobbling on the spinner.

But good news my fellow human, there is a fix, and I have it detailed in the issue description.

Version

v38.39.0

Browser

Safari

Dominant language
TypeScript
Stars
3.9k
Forks
683
Avg merge
3d 5h
Merged PRs (30d)
45

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from primer/react

All issues in primer/react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.