diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 7acce45..3ff9066 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -93,15 +93,26 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
 
 <script>
   document.addEventListener('astro:page-load', () => {
+    let ticking = false;
     const onScroll = () => {
-      document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
-      document.documentElement.classList.add('has-js');
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
+          ticking = false;
+        });
+        ticking = true;
+      }
     };
 
-    window.removeEventListener('scroll', onScroll);
     window.addEventListener('scroll', onScroll, { passive: true });
-
+    
     onScroll();
+
+    document.documentElement.classList.add('has-js');
+
+    document.addEventListener('astro:before-swap', () => {
+      window.removeEventListener('scroll', onScroll);
+    }, { once: true });
   });
 </script>
 
@@ -129,6 +140,7 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
 
     -webkit-mask-position-y: var(--scroll-offset);
     mask-position-y: var(--scroll-offset);
+    will-change: mask-position;
   }
 
   /* Background that creates the "glimmer" effect */