Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#8,423 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
74/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
活発
技術スタック
react, typescript
領域
frontend

調査の方向性

Spinner component から始め、リンク先の Primer spinner ドキュメントページで Safari on macOS において問題を再現します。その SVG 構造とアニメーションを、提案されている grouping と transform-origin のアプローチと比較します。完了条件は、Safari で回転中も spinner が視覚的に固定されたままになり、他のブラウザーで regression が発生しないことです。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
3.9k
フォーク
683
平均マージ
3日 5時間
マージ済み PR（30日）
45

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

primer/react のほかの issue

primer/react の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。