From 99ec41bd870c9195ba18831e4275ed90fbc0b635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sat, 28 Feb 2026 16:55:24 +0000
Subject: [PATCH] fix: improve mobile scroll performance and accessibility

Remove global smooth scroll (caused laggy feel), use solid header bg on
mobile instead of backdrop-blur, respect prefers-reduced-motion, and add
targeted smooth scroll only for anchor nav clicks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/modules/common/turbo-link.tsx      | 17 +++++++++++++++++
 .../modules/marketing/layout/header/header.tsx  |  2 +-
 packages/ui/web/src/styles/globals.css          | 15 +++++++++++++--
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/modules/common/turbo-link.tsx b/apps/web/src/modules/common/turbo-link.tsx
index e8ab1c6..8fc731a 100644
--- a/apps/web/src/modules/common/turbo-link.tsx
+++ b/apps/web/src/modules/common/turbo-link.tsx
@@ -8,6 +8,7 @@ import type { ComponentProps } from "react";
 type TurboLinkProps = ComponentProps<typeof Link>;
 
 export const TurboLink = ({
+  onClick,
   onMouseEnter,
   onPointerEnter,
   onTouchStart,
@@ -25,10 +26,26 @@ export const TurboLink = ({
     }
   };
 
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+
+    const hash = strHref?.split("#")[1];
+    if (hash) {
+      const el = document.getElementById(hash);
+      if (el) {
+        e.preventDefault();
+        el.scrollIntoView({ behavior: "smooth" });
+        window.history.pushState(null, "", `#${hash}`);
+      }
+    }
+  };
+
   return (
     <Link
       {...props}
       prefetch={false}
+      onClick={handleClick}
       onMouseEnter={(e) => {
         conditionalPrefetch();
         onMouseEnter?.(e);
diff --git a/apps/web/src/modules/marketing/layout/header/header.tsx b/apps/web/src/modules/marketing/layout/header/header.tsx
index a467573..3e4dba2 100644
--- a/apps/web/src/modules/marketing/layout/header/header.tsx
+++ b/apps/web/src/modules/marketing/layout/header/header.tsx
@@ -35,7 +35,7 @@ export const Header = () => {
   const { t } = useTranslation("marketing");
 
   return (
-    <header className="bg-background/80 sticky inset-0 top-[var(--banner-height)] z-40 w-full py-3 backdrop-blur-sm">
+    <header className="bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 lg:bg-background/80 lg:backdrop-blur-sm">
       <div className="flex items-center justify-between px-6 pr-4 sm:container">
         <TurboLink
           href={pathsConfig.index}
diff --git a/packages/ui/web/src/styles/globals.css b/packages/ui/web/src/styles/globals.css
index f0d360d..062131c 100644
--- a/packages/ui/web/src/styles/globals.css
+++ b/packages/ui/web/src/styles/globals.css
@@ -87,11 +87,22 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    overscroll-behavior: none;
   }
 
   html {
-    scroll-behavior: smooth;
+    overscroll-behavior: none;
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
   }
 
   body {