Fix webkit blur (Should work)

RappyBots · Feb 23, 2024 · c725de7 · c725de7
1 parent a8d3837
commit c725de7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.backdrop-blur-md-w-webkit {
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+}
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -8,7 +8,7 @@
 	let hamburgerMenuOpen = false;
 </script>
 
-<header class="fixed w-screen top-0 h-20 backdrop-blur-md outline outline-[#cbd5e11a] outline-1 drop-shadow-lg">
+<header class="fixed w-screen top-0 h-20 backdrop-blur-md-w-webkit outline outline-[#cbd5e11a] outline-1 drop-shadow-lg">
     <div class="flex h-full items-center px-5 justify-between">
 		<!-- Logo -->
         <a href="/" class="flex items-center h-4/6">
@@ -37,7 +37,7 @@
 
 	{#if hamburgerMenuOpen}
 		<div 
-			class="flex backdrop-blur-md mt-[1px] outline-[#cbd5e11a] outline-1 drop-shadow-lg" 
+			class="flex backdrop-blur-md-w-webkit mt-[1px] outline-[#cbd5e11a] outline-1 drop-shadow-lg" 
 			transition:slide="{{ duration: 1000, easing: cubicOut }}"
 		>
 			<div class="font-semibold m-5 space-y-5 w-full hover:*:text-secondary *:block">