From 860493058a7d583edaea0e5261db1e485a016fc8 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Mon, 23 Feb 2026 17:14:57 +0300
Subject: [PATCH] perf: fix GPU-heavy CSS patterns

- Remove mix-blend-mode: overlay from body::before noise texture
  (was forcing fullscreen GPU compositing on every paint)
- Disable noise texture on mobile via display:none media query
- Replace backdrop-filter animation in backdropFadeIn/Out keyframes
  with opacity-only animation (backdrop-filter transition is expensive)
- Replace toast progress bar width animation with scaleX (GPU-composited)
- Remove redundant will-change: transform from .glass and .wave-blob
---
 src/components/Toast.tsx |  3 ++-
 src/styles/globals.css   | 26 ++++++++++++--------------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 0b85413..48abd30 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -221,9 +221,10 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
         {/* Progress bar */}
         <div className="absolute bottom-0 left-0 right-0 h-1 bg-dark-800/50">
           <div
-            className={`h-full ${style.progress} opacity-60`}
+            className={`h-full w-full ${style.progress} opacity-60`}
             style={{
               animation: `shrink ${toast.duration}ms linear forwards`,
+              transformOrigin: 'left',
             }}
           />
         </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 3778807..15cec3f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -192,7 +192,7 @@
     position: relative;
   }
 
-  /* Global Noise Texture */
+  /* Global Noise Texture — no mix-blend-mode to avoid fullscreen GPU compositing */
   body::before {
     content: '';
     position: fixed;
@@ -201,7 +201,13 @@
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
     opacity: 0.03;
-    mix-blend-mode: overlay;
+  }
+
+  /* Disable noise on mobile to save GPU */
+  @media (max-width: 1023px) {
+    body::before {
+      display: none;
+    }
   }
 
   /* Optimize main scrollable content */
@@ -440,9 +446,7 @@ img.twemoji {
   /* Glass effect - Dark (optimized for mobile) */
   .glass {
     @apply border border-dark-700/30 bg-dark-900/80;
-    /* GPU acceleration */
     transform: translateZ(0);
-    will-change: transform;
   }
 
   /* Enable backdrop-blur only on desktop where it's performant */
@@ -1431,13 +1435,13 @@ input[type='checkbox']:hover:not(:checked) {
   animation: wheel-glow 2s ease-in-out infinite;
 }
 
-/* Toast progress bar animation */
+/* Toast progress bar animation — use scaleX instead of width to avoid layout thrashing */
 @keyframes shrink {
   from {
-    width: 100%;
+    transform: scaleX(1);
   }
   to {
-    width: 0%;
+    transform: scaleX(0);
   }
 }
 
@@ -1454,10 +1458,8 @@ input[type='checkbox']:hover:not(:checked) {
 .wave-blob {
   position: absolute;
   border-radius: 50%;
-  filter: blur(60px); /* Reduced from 80px for better performance */
+  filter: blur(60px);
   opacity: 0.5;
-  /* GPU acceleration */
-  will-change: transform;
   transform: translateZ(0);
   backface-visibility: hidden;
 }
@@ -1644,22 +1646,18 @@ input[type='checkbox']:hover:not(:checked) {
 @keyframes backdropFadeIn {
   from {
     opacity: 0;
-    backdrop-filter: blur(0);
   }
   to {
     opacity: 1;
-    backdrop-filter: blur(8px);
   }
 }
 
 @keyframes backdropFadeOut {
   from {
     opacity: 1;
-    backdrop-filter: blur(8px);
   }
   to {
     opacity: 0;
-    backdrop-filter: blur(0);
   }
 }