raucao/marco
1
0
Fork 0
Code Issues 12 Pull Requests Releases Activity

Optimize animations on iOS

Browse Source
This commit is contained in:
Râu Cao 2026-01-26 17:52:41 +07:00
parent 2193f935cc
commit 0decb4cf1b
Signed by: raucao
GPG Key ID: 37036C356E56CC51
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/styles/app.css
View File

@ -502,11 +502,15 @@ body {
border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
background: rgb(255 204 51 / 20%);
position: absolute;
transform: translate(-50%, -50%);
/* Use translate3d for GPU acceleration on iOS */
transform: translate3d(-50%, -50%, 0);
pointer-events: none;
animation: pulse 1.5s infinite ease-out;
box-sizing: border-box; /* Ensure border is included in width/height */
display: none; /* Hidden by default */
will-change: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.search-pulse.active {
@ -520,12 +524,12 @@ body {
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(0.8);
transform: translate3d(-50%, -50%, 0) scale(0.8);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(1.4);
transform: translate3d(-50%, -50%, 0) scale(1.4);
opacity: 0;
}
}