Fix:Circular loading spinner is oval in safari browser

[HEREYUA]

Fix:#29041

When defining height and aspect-ratio, Safari will calculate the width based on these two values. However, it appears that Safari applies the aspect-ratio based on the total height (which includes border-width), which may cause the total width of the element to be twice the border-width more than the total height.

When defining width and aspect-ratio, it seems that Safari accurately calculates the height based on these two values

Update:
In the following discussion, we found the same issue on the webkit bug：https://bugs.webkit.org/show_bug.cgi?id=267625

When absolute positioning is not used on ::after, the problem mentioned above can be avoided, but this might affect some UI

[techknowlogick]

thanks so much!

[silverwind]

This will likely break this rule below which only sets height:

gitea/web_src/css/modules/animations.css

Line 48 in 8d55eaf

height: var(--height-loading);

Further below, another variant sets both:

gitea/web_src/css/modules/animations.css

Lines 64 to 65 in 8d55eaf

	width: 1.25rem;
	height: 1.25rem;

So I think we should make all 3 rules the same, either set only 1 dimension, or both in all three rules.

Regarding the Safari issue: Does changing box-sizing fix it? It sounds like a Webkit bug, check https://bugs.webkit.org/.

[HEREYUA]

This will likely break this rule below which only sets height:

gitea/web_src/css/modules/animations.css

Line 48 in 8d55eaf

height: var(--height-loading);

Further below, another variant sets both:

gitea/web_src/css/modules/animations.css

Lines 64 to 65 in 8d55eaf

	width: 1.25rem;
	height: 1.25rem;

So I think we should make all 3 rules the same, either set only 1 dimension, or both in all three rules.

Regarding the Safari issue: Does changing box-sizing fix it? It sounds like a Webkit bug, check https://bugs.webkit.org/.

I tried changing box-sizing but it did not solve it, Perhaps we can either set only the width dimension or set both width and height. Which one do you think is better?

[silverwind]

Ideally we set only one dimension and aspect-ratio, and the assumption was that that works in all browsers, no matter which dimension is set. I suggest we create a standalone https://jsfiddle.net/ example to showcase the Safari issue, and then investigate the possible workarounds.

I prefer using height over width because that is most likely the limiting dimension for the spinner.

[silverwind]

I think this might be the related bug, but there are also others.

[HEREYUA]

I think this might be the related bug, but there are also others.

I might have found the related one in the list you provided：https://codepen.io/legion80/pen/ZEPeLdz
It displays correctly when absolute positioning is not used on ::after（It has been centered using flex layout）

[silverwind]

Yes, it's the same bug. It's strange that it only happens with height but not width. The workaround is likely good but we should add a link comment to the webkit bug and adjust the two subsequent selectors I linked to only set width.

[HEREYUA]

I've made the adjustment:3102bd9

[silverwind]

Hmm, we need to be really careful with these spinner CSS adjustments, they are used in many places in the UI.

Per conversation

[HEREYUA]

Hmm, we need to be really careful with these spinner CSS adjustments, they are used in many places in the UI.

You're right, could there possibly be something that I've missed in my adjustments? Perhaps we can also opt for minimal changes, just fixing the positioning issue with ::after, so that even if the height and aspect-ratio are used together, it won't cause a problem on Safari.

[silverwind]

I'd say keep changeset minimal to fix the issue. I think just switching width to height in the .is-loading class and the classes below that extend the selector. There might also be some non-CSS code that adjust height currently, if they exist, they need to switch as well. Also add a comment linking to the webkit bug.

[HEREYUA]

I'd say keep changeset minimal to fix the issue. I think just switching width to height in the .is-loading class and the classes below that extend the selector.

updated

There might also be some non-CSS code that adjust height currently, if they exist, they need to switch as well.

It seems that no results were found through the is-loading search.

Also add a comment linking to the webkit bug.

updated

[wxiaoguang]

It breaks the loading UI http://localhost:3000/devtest/gitea-ui

Before:

After:

[HEREYUA]

It breaks the loading UI http://localhost:3000/devtest/gitea-ui

Before:

After:

This seems to be caused by the flexible layout, it doesn't seem to be an effective method to solve

[silverwind]

It does reproduce on the /devtest page, let's see if I find a simpler fix.

[silverwind]

Found a better workaround: #29801

[techknowlogick]

Thanks for your effort in this PR @HEREYUA, I think we'll use the alternative proposed in the other PR. This PR was helpful in progressing towards the solution and is very much appreciated :)