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