Circular loading spinner is an oval on mobile

[lukeh990]

Description

When doing any operation that starts a loading spinner on mobile. It is always an oblong shape instead of a perfect circle. Most notably I see this when loading the user dashboard, logging in with passkey, or in any loading spinner.

Screenshots

Gitea Version

1.21.5

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

iOS 17.3

Browser Version

AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Mobile/15E148 Safari/604.1

[yardenshoham]

Can't reproduce on chrome

[techknowlogick]

I've seen this on Gitea.com using the mobile safari browser. I can't replicate using a desktop browser even after changing viewport, so I'll have to figure out how to finally set up the remote developer console so I can see what happening.

Edit: I've only seen this on the 2fa waiting/login screen

[lukeh990]

I was able to recreate it again on a Mac. The easiest way I found of replicating it is with the passkey prompt. It was even on the desktop viewport. It is most certainly a webkit issue. I tired poking around with the CSS and it look like the aspect-ratio: 1 set on the .is-loading:after selector is not being enforced as the width and height are not the same.

[lukeh990]

I think I've managed to isolate the issue to the border properties. I created a codeine and started adding individual components of the gitea .is-loading::after selector. It looked fine up until I added the border in. After that it just suddenly jumped. See this codepen (Only works with safari).

I made a little diagram of what is happening:

Edit: here is the CSS that I put on the divs:

div {
  width: 40px;
  height: 40px;
  
  pointer-events: none !imoortant;
  position: relative !important;
  overflow: hidden !important;
}

Here is what the codepen window looks like: