From 0decb4cf1bc642b02563049d984804fb4f04196b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A2u=20Cao?= Date: Mon, 26 Jan 2026 17:52:41 +0700 Subject: [PATCH] Optimize animations on iOS --- app/styles/app.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/styles/app.css b/app/styles/app.css index 4aaac6f..464a3a8 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -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; } }