From 93eca1fa7afa1d1faad5742e290ff83d6d607c68 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Wed, 5 Feb 2025 17:07:45 +0000
Subject: [PATCH] fix: theme transition error on ios

---
 src/components/Header.astro    |  1 +
 src/components/Navbar.astro    | 12 ++++++------
 src/components/SiteTitle.astro |  2 +-
 src/pages/index.astro          |  2 +-
 src/styles/global.css          | 15 ++++-----------
 uno.config.ts                  | 11 ++++++++++-
 6 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b329ee2..03469be 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -17,6 +17,7 @@ const marginBottom = {
 <header>
   <h1 class={`${marginBottom} mt--5 text-12.8 c-primary font-bold font-title`}>
     <a
+      class="ios-flash-fix"
       href={getLocalizedPath('/')}
       transition:name="site-title"
       data-disable-transition-on-theme
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index aa57847..59d0273 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -19,8 +19,8 @@ const isAboutActive = isAbout;
         href={getLocalizedPath('/')}
         class:list={[
           isPostActive
-            ? 'font-bold text-primary'
-            : 'hover:text-primary hover:font-bold',
+            ? 'font-bold c-primary'
+            : 'hover:c-primary hover:font-bold',
         ]}
       >
         {currentUI.posts}
@@ -31,8 +31,8 @@ const isAboutActive = isAbout;
         href={getLocalizedPath('/tags')}
         class:list={[
           isTagActive
-            ? 'font-bold text-primary'
-            : 'hover:text-primary hover:font-bold',
+            ? 'font-bold c-primary'
+            : 'hover:c-primary hover:font-bold',
         ]}
       >
         {currentUI.tags}
@@ -43,8 +43,8 @@ const isAboutActive = isAbout;
         href={getLocalizedPath('/about')}
         class:list={[
           isAboutActive
-            ? 'font-bold text-primary'
-            : 'hover:text-primary hover:font-bold',
+            ? 'font-bold c-primary'
+            : 'hover:c-primary hover:font-bold',
         ]}
       >
         {currentUI.about}
diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro
index 4c8cd67..eabca0c 100644
--- a/src/components/SiteTitle.astro
+++ b/src/components/SiteTitle.astro
@@ -8,7 +8,7 @@ const { getLocalizedPath } = getPagePath(currentPath)
 ---
 
 <a
-  class="mt--1.4 text-8.32 c-secondary font-bold font-title"
+  class="ios-flash-fix mt--1.4 text-8.32 c-secondary font-bold font-title"
   href={getLocalizedPath('/')}
   transition:name="site-title"
   data-disable-transition-on-theme
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2a5e37f..7aece2b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -37,7 +37,7 @@ const postsByYear = await getPostsByYear()
             // Single Post
             <li class="mt-7">
               {/* Post Title */}
-              <a class="hover:text-primary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
+              <a class="hover:c-primary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
                 {/* Post Date */}
                 <div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
                   {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
diff --git a/src/styles/global.css b/src/styles/global.css
index 55d7607..f8c1ba6 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,9 +5,7 @@
 }
 
 html {
-  --at-apply: 'bg-background c-secondary text-62.5% antialiased scroll-smooth';
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  --at-apply: 'bg-background c-secondary text-62.5% antialiased scroll-smooth scrollbar-hidden';
 }
 
 html::-webkit-scrollbar {
@@ -15,10 +13,7 @@ html::-webkit-scrollbar {
 }
 
 body {
-  --at-apply: 'text-1.6rem';
-  /* Fix for iOS browser flash issue */
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
+  --at-apply: 'text-1.6rem ios-flash-fix';
 }
 
 h1 {
@@ -46,10 +41,8 @@ h6 {
 }
 
 article img {
-  --at-apply: 'cursor-zoom-in';
   /* Optimize animation performance of Scrollbar */
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
+  --at-apply: 'cursor-zoom-in ios-flash-fix';
 }
 
 /* Horizontal reveal animation on theme toggle */
@@ -84,7 +77,7 @@ html[data-theme-transition] [data-disable-transition-on-theme] {
 
 @supports not (view-transition-name: none) {
   html:not([data-restore-theme]) {
-    --at-apply: 'transition-colors duration-500 ease-in-out';
+    --at-apply: 'transition-colors duration-300 ease-in-out';
   }
 
   html:not([data-restore-theme]) [data-disable-transition-on-theme] {
diff --git a/uno.config.ts b/uno.config.ts
index 0e6409a..6b74f7f 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -35,7 +35,16 @@ export default defineConfig({
     },
   },
   shortcuts: {},
-  rules: [],
+  rules: [
+    ['scrollbar-hidden', {
+      'scrollbar-width': 'none',
+      '-ms-overflow-style': 'none',
+    }],
+    ['ios-flash-fix', {
+      'backface-visibility': 'hidden',
+      '-webkit-backface-visibility': 'hidden',
+    }],
+  ],
   transformers: [
     transformerDirectives(),
     transformerVariantGroup(),