fix: highlight position issue on ios for navbar and footer

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

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>

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) {