From 110fad06abf240e017e27b9438f18ada33cf7597 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Thu, 15 May 2025 22:56:14 +0100
Subject: [PATCH] fix: highlight position issue on ios for navbar and footer

---
 src/components/Footer.astro | 2 +-
 src/components/Navbar.astro | 2 +-
 src/styles/global.css       | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 3696bae..e55524d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -22,7 +22,7 @@ const links = socialLinks.map((link) => {
   return link
 })
 
-const footerLinkClass = 'highlight-hover transition-colors after:bottom-0 hover:c-primary'
+const footerLinkClass = 'highlight-hover footer-highlight-position-fix transition-colors after:bottom-0 hover:c-primary'
 ---
 
 <footer
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 84ee3c5..e12b71b 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -47,7 +47,7 @@ const navItems = [
       <li>
         <a
           href={getLocalizedPath(item.href)}
-          class={item.className}
+          class={`${item.className} navbar-highlight-position-fix`}
         >
           {item.label}
         </a>
diff --git a/src/styles/global.css b/src/styles/global.css
index 61fbb8e..143fc6b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -49,6 +49,15 @@ h4:hover .heading-anchor-link {
 .highlight-hover::after {
   --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-300 ease-out';
 }
+/* Fix Position Issue on iOS */
+@supports (-webkit-touch-callout: none) {
+  .navbar-highlight-position-fix {
+    --at-apply: 'after:bottom-0.68em';
+  }
+  .footer-highlight-position-fix {
+    --at-apply: 'after:bottom-0.24em';
+  }
+}
 
 /* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 ::view-transition-new(theme-transition) {