Skip to content

Fix:Circular loading spinner is oval in safari browser #29713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed

Fix:Circular loading spinner is oval in safari browser #29713

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
14c13ce
modify variables
HEREYUA Mar 8, 2024
3b749d8
modify variables
HEREYUA Mar 8, 2024
46663ca
Merge remote-tracking branch 'upstream/main'
HEREYUA Mar 8, 2024
81f9a84
Set user's 24h preference from their current OS locale (#29651)
silverwind Mar 8, 2024
fa27104
revert
HEREYUA Mar 8, 2024
0c9d222
Merge remote-tracking branch 'upstream/main'
HEREYUA Mar 8, 2024
076e99f
Merge remote-tracking branch 'upstream/main'
HEREYUA Mar 11, 2024
8d55eaf
Fix:Circular loading spinner is oval in safari browser
HEREYUA Mar 11, 2024
3102bd9
fix
HEREYUA Mar 12, 2024
c64a2c3
fix
HEREYUA Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions web_src/css/modules/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
@keyframes isloadingspin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.is-loading {
display: flex;
justify-content: center;
align-items: center;
pointer-events: none !important;
position: relative !important;
overflow: hidden !important;
}

.is-loading > * {
opacity: 0.3;
}

/* Using `height` and `aspect-ratio` together in Safari can cause issues. The same problem can be seen in the WebKit bug:https://bugs.webkit.org/show_bug.cgi?id=267625, but it can be avoided by not using absolute positioning on `::after`. */
.is-loading::after {
content: "";
position: absolute;
display: block;
left: 50%;
top: 50%;
height: min(4em, 66.6%);
aspect-ratio: 1;
transform: translate(-50%, -50%);
animation: isloadingspin 1000ms infinite linear;
border-width: 4px;
border-style: solid;
Expand Down Expand Up @@ -61,7 +58,6 @@ form.single-button-form.is-loading .button {
code.language-math.is-loading::after {
padding: 0;
border-width: 2px;
width: 1.25rem;
height: 1.25rem;
}

Expand Down