improve status panel label heartbeat animation to reduce text blurriness

Tanvir1337x · Jul 28, 2024 · 6ffbd70 · 6ffbd70
1 parent 4da49ff
commit 6ffbd70
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/chrome/panel/statuspanel.css b/chrome/panel/statuspanel.css
@@ -35,10 +35,17 @@
 #statuspanel-label {
   font-size: 20px !important;
   padding: 5 5px !important; /* Padding on the sides */
-  /* Fully transparent background */
-  background-color: rgba(32, 32, 32, 0) !important;
+  background-color: rgba(
+    32,
+    32,
+    32,
+    0
+  ) !important; /* Fully transparent background */
   color: #c38f8f !important;
   animation: heartbeat 1.5s ease-in-out infinite;
+  will-change: transform; /* Hint to the browser to optimize for transform changes */
+  backface-visibility: hidden; /* Prevents flickering */
+  transform: translateZ(0); /* Creates a new layer for the element */
 }
 
 /* Hide the status panel */

diff --git a/chrome/styling/animations.css b/chrome/styling/animations.css
@@ -177,14 +177,12 @@
 }
 
 @keyframes heartbeat {
-  0% {
+  0%,
+  100% {
     transform: scale(1);
   }
   50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
+    transform: scale(1.2);
   }
 }