From 2a19739f91432ec07b3dd7959c84e9c8f217c1ab Mon Sep 17 00:00:00 2001
From: holybaechu <joonhoo0524@naver.com>
Date: Fri, 23 Feb 2024 21:46:44 +0900
Subject: [PATCH] Fix backdrop-blur on hamburger menu not working under webkit

---
 src/app.css                  |  7 +------
 src/components/Header.svelte | 15 +++++----------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/app.css b/src/app.css
index 65e0997..bd6213e 100644
--- 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);
-}
\ No newline at end of file
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index fbb1649..3bed8ad 100644
--- 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>
\ No newline at end of file