Fix backdrop-blur on hamburger menu not working under webkit

RappyBots · Feb 23, 2024 · 2a19739 · 2a19739
1 parent 44ffcc3
commit 2a19739
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 16 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,8 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-.backdrop-blur-md-w-webkit {
-    -webkit-backdrop-filter: blur(12px);
-    backdrop-filter: blur(12px);
-}
+@tailwind utilities;
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-w-webkit outline outline-[#cbd5e11a] outline-1 drop-shadow-lg">
+<header class="fixed w-screen top-0 h-20 backdrop-blur-md 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">
@@ -36,15 +36,10 @@
     </div>
 
 	{#if hamburgerMenuOpen}
-		<div 
-			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">
-				{@html
-					document.getElementById("nav-links")?.innerHTML
-				}
-			</div>
+		<div class="font-semibold space-y-5 w-full hover:*:text-secondary *:block backdrop-blur-md p-5">
+			{@html
+				document.getElementById("nav-links")?.innerHTML
+			}
 		</div>
 	{/if}
 </header>