fix: make safari animation smoother

lzear · Nov 5, 2023 · 21c6370 · 21c6370
1 parent 44f394b
commit 21c6370
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/.vitepress/theme/stuff.css b/.vitepress/theme/stuff.css
@@ -17,7 +17,7 @@
 
 :root {
     --vp-home-hero-image-background-image: linear-gradient(235deg, #00F 0% 25%, #f0f 20% 40%, #0f0  40% 58%, #ff0 50% 80%, #00F 80% 100%);
-    --vp-home-hero-image-filter: saturate(1.5)blur(10px)drop-shadow(20px -40px 60px yellow)brightness(1.5)blur(40px);
+    --vp-home-hero-image-filter: brightness(1.5);
 }
 
 .image-container {
@@ -37,6 +37,14 @@
     animation-direction: alternate;
 }
 
+.image-bg, .image-container, .image-container img {
+
+    color-interpolation-filters: sRGB !important;
+    color-interpolation: sRGB !important;
+    will-change: filter, transform;
+    /*transform: translateZ(0)*/
+}
+
 @keyframes movingGradient {
     0% {
         background-position: 300% 300px;
@@ -49,10 +57,10 @@
 }
 @keyframes movingContrast {
     0% {
-        filter: saturate(1.5)blur(10px)drop-shadow(20px -40px 60px rgba(0, 234, 255, 0.73))brightness(1.5)blur(40px) contrast(1.5);
+        filter: saturate(1.5) brightness(1.5) blur(45px) contrast(1.5) opacity(0.5);
     }
     100% {
-        filter: saturate(1.5)blur(10px)drop-shadow(20px -40px 60px rgba(230, 0, 255, 0.28))brightness(1.5)blur(40px) contrast(20);
+        filter: saturate(1.5) brightness(1.5) blur(60px) contrast(20) opacity(0.2);
     }
 }