Fix Safari spinner rendering (#29801) (#29802)

Backport #29801 by @silverwind

Fixes: https://github.com/go-gitea/gitea/issues/29041
Fixes: https://github.com/go-gitea/gitea/pull/29713

Any of the `width: *-content` properties seem to workaround this Webkit
bug, this one seemed most suitable.

Before:
<img width="184" alt="Screenshot 2024-03-14 at 22 29 58"
src="https://github.com/go-gitea/gitea/assets/115237/6effc5f0-bc64-4752-be74-9c43b3974407">

After:
<img width="177" alt="Screenshot 2024-03-14 at 22 30 30"
src="https://github.com/go-gitea/gitea/assets/115237/5de244d7-6b46-428e-957c-4b10f53e2441">

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit df23ec0f8b490bee49dc0e7944b529f3ede35301)
This commit is contained in:
Giteabot 2024-03-15 06:08:59 +08:00 committed by Earl Warren
parent 0dcc9b8466
commit 6fcea1208d
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00

View file

@ -20,6 +20,7 @@
left: 50%;
top: 50%;
height: min(4em, 66.6%);
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
aspect-ratio: 1;
transform: translate(-50%, -50%);
animation: isloadingspin 1000ms infinite linear;