fix: theme transition error on ios

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

src/components/Navbar.astro

@@ -19,8 +19,8 @@ const isAboutActive = isAbout;
         href={getLocalizedPath('/')}
         class:list={[
           isPostActive
-            ? 'font-bold text-primary'
+            ? 'font-bold c-primary'
-            : 'hover:text-primary hover:font-bold',
+            : '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'
+            ? 'font-bold c-primary'
-            : 'hover:text-primary hover:font-bold',
+            : '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'
+            ? 'font-bold c-primary'
-            : 'hover:text-primary hover:font-bold',
+            : 'hover:c-primary hover:font-bold',
         ]}
       >
         {currentUI.about}

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

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, '-')}

src/styles/global.css

@@ -5,9 +5,7 @@
 }
 
 html {
-  --at-apply: 'bg-background c-secondary text-62.5% antialiased scroll-smooth';
+  --at-apply: 'bg-background c-secondary text-62.5% antialiased scroll-smooth scrollbar-hidden';
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
 html::-webkit-scrollbar {
@@ -15,10 +13,7 @@ html::-webkit-scrollbar {
 }
 
 body {
-  --at-apply: 'text-1.6rem';
+  --at-apply: 'text-1.6rem ios-flash-fix';
-  /* Fix for iOS browser flash issue */
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
 }
 
 h1 {
@@ -46,10 +41,8 @@ h6 {
 }
 
 article img {
-  --at-apply: 'cursor-zoom-in';
   /* Optimize animation performance of Scrollbar */
-  transform: translateZ(0);
+  --at-apply: 'cursor-zoom-in ios-flash-fix';
-  -webkit-transform: translateZ(0);
 }
 
 /* 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] {

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(),