Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#8,423 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
74/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia con il componente Spinner e riproduci il problema nella pagina collegata della documentazione di Primer sullo spinner in Safari su macOS. Confronta la sua struttura SVG e la sua animazione con l’approccio proposto basato su raggruppamento e transform-origin; il lavoro è completato quando lo spinner rimane visivamente fisso mentre ruota in Safari senza introdurre regressioni negli altri browser.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
3.9k
Fork
691
Merge medio
3g 6h
PR unite (30g)
36

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di primer/react

Tutte le issue di primer/react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.