fix

Author: doeixd

website/src/components/MobileHeader.astro

@@ -173,6 +173,10 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
         align-items: center;
         justify-content: space-between;
         gap: var(--mobile-header-gap);
+        /* Performance optimizations for fixed positioning */
+        will-change: transform;
+        contain: layout style paint;
+        isolation: isolate;
     }
 
     @media (max-width: 768px) {
@@ -294,6 +298,9 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
         opacity: 0;
         pointer-events: none;
         transition: opacity var(--transition-normal);
+        /* Performance optimizations for dynamic visibility */
+        will-change: opacity;
+        isolation: isolate;
     }
 
     @media (max-width: 768px) {
@@ -382,6 +389,9 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
         opacity: 0;
         pointer-events: none;
         transition: opacity var(--transition-normal);
+        /* Performance optimizations for dynamic visibility */
+        will-change: opacity;
+        isolation: isolate;
     }
 
     @media (max-width: 768px) {
@@ -493,6 +503,8 @@ const tocHeadings = headings.filter((h) => h.depth === 2 || h.depth === 3);
         border-left-color: var(--accent);
         color: var(--accent);
         font-weight: var(--font-weight-medium);
+        /* Force GPU acceleration for active state */
+        transform: translateZ(0);
     }
 
     /* Dark mode styles */

website/src/components/Navigation.astro

@@ -342,6 +342,11 @@ function isActive(slug: string | undefined) {
         visibility: hidden;
         transform: translateY(20px);
         transition: var(--scroll-button-transition);
+
+        /* Performance optimizations for fixed positioning */
+        will-change: transform, opacity, visibility;
+        /* Create own stacking context to prevent containment issues */
+        isolation: isolate;
     }
 
     /* Show floating button when sidebar is hidden */

website/src/components/ScrollToTop.astro

@@ -83,6 +83,11 @@
         visibility: hidden;
         transform: var(--scroll-button-transform-hidden);
         transition: var(--scroll-button-transition);
+
+        /* Performance optimizations for fixed positioning */
+        will-change: transform, opacity, visibility;
+        /* Create own stacking context to prevent containment issues */
+        isolation: isolate;
     }
 
     .scroll-to-top.visible {

website/src/layouts/DocsLayout.astro

@@ -562,6 +562,14 @@ const theme = themeCookie?.value === "dark" ? "dark" : "light";
                 transition: background-color var(--transition-fast),
                             color var(--transition-fast),
                             font-weight var(--transition-fast) !important;
+                /* Force repaint for active state changes */
+                will-change: background-color, color;
+            }
+
+            /* Ensure active state changes repaint immediately */
+            .nav-link.active {
+                /* Trigger immediate repaint for active state */
+                transform: translateZ(0);
             }
 
             /* Prevent view transition from interfering with nav link transitions */
@@ -573,6 +581,12 @@ const theme = themeCookie?.value === "dark" ? "dark" : "light";
                 }
             }
 
+            /* Optimize sidebar for dynamic content changes */
+            .sidebar {
+                /* Allow paint updates for active link changes */
+                contain: layout style;
+            }
+
             ::view-transition-old(main) {
                 animation: none;
             }
@@ -700,8 +714,8 @@ const theme = themeCookie?.value === "dark" ? "dark" : "light";
                 min-height: 100vh;
                 gap: var(--layout-docs-container-gap, var(--space-2xl));
                 position: relative;
-                /* Improve layout stability */
-                contain: layout style paint;
+                /* Improve layout stability - use style containment only to avoid blocking paint updates */
+                contain: layout style;
             }
 
             /* Only use 3-column layout on desktop where TOC is visible */

website/src/layouts/LandingLayout.astro

@@ -662,8 +662,8 @@ const theme = themeCookie?.value === "dark" ? "dark" : "light";
             .landing-container {
                 min-height: 100vh;
                 width: 100%;
-                /* Improve layout stability */
-                contain: layout style paint;
+                /* Improve layout stability - avoid paint containment for dynamic content */
+                contain: layout style;
             }
 
             .landing-content {