Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#8,423 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza con el componente Spinner y reproduce el problema en la página enlazada de documentación de Primer sobre spinner en Safari en macOS. Compara su estructura SVG y su animación con el enfoque propuesto de agrupación y transform-origin; se considera terminado cuando el spinner permanece visualmente fijo mientras rota en Safari sin provocar regresiones en otros navegadores.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
3.9k
Forks
697
Merge medio
2 d 17 h
PR fusionados (30 d)
37

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de primer/react

Todos los issues de primer/react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.