From c725de794cf52c56602b9286de122fe980b07bd9 Mon Sep 17 00:00:00 2001
From: holybaechu <joonhoo0524@naver.com>
Date: Fri, 23 Feb 2024 18:58:40 +0900
Subject: [PATCH] Fix webkit blur (Should work)

---
 src/app.css                  | 7 ++++++-
 src/components/Header.svelte | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index bd6213e..65e0997 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.backdrop-blur-md-w-webkit {
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+}
\ No newline at end of file
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index c6711a2..cc5835c 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 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">