fix(mobile): resolve touch scroll locking and double-swipe on mobile devices

Author: Btema2

src/app/globals.css

@@ -19,7 +19,7 @@
 body {
   background-color: var(--color-axion-bg);
   color: var(--color-axion-text);
-  overflow-x: hidden;
+  overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/app/layout.tsx

@@ -36,7 +36,7 @@ export default function RootLayout({
       className={`${geistSans.variable} ${geistMono.variable} antialiased`}
     >
       <body>
-        <div className="relative w-full overflow-x-hidden min-h-screen flex flex-col">
+        <div className="relative w-full overflow-x-clip min-h-screen flex flex-col">
           <ParticleBackground />
           <Navbar />
           <SmoothScrolling>

src/app/page.tsx

@@ -9,7 +9,7 @@ const ResearchShowcase = dynamic(() => import("@/components/ResearchShowcase"));
 export default function Home() {
 
   return (
-    <main className="block w-full min-h-screen overflow-x-hidden relative">
+    <main className="block w-full min-h-screen overflow-x-clip relative">
 
       <div className="hidden md:block">
         <HeroScene />

src/components/FeatureShowcase.tsx

@@ -235,7 +235,7 @@ function FeatureRow({ group, index }: { group: typeof featureGroups[0]; index: n
       </div>
 
       {/* Screens Block */}
-      <div ref={screensRef} className={`flex-1 w-full md:w-auto relative z-10 flex items-center md:items-end ${group.screens.length === 1 ? "justify-center" : "justify-start"} md:justify-center gap-6 overflow-x-auto md:overflow-visible snap-x snap-mandatory md:snap-none [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] pb-8 md:pb-0 pt-6 md:pt-0 px-6 md:px-0 -mx-6 md:mx-0`}>
+      <div ref={screensRef} className={`flex-1 w-full md:w-auto relative z-10 flex items-center md:items-end ${group.screens.length === 1 ? "justify-center" : "justify-start"} md:justify-center gap-6 overflow-x-auto md:overflow-visible snap-x snap-mandatory md:snap-none [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] pb-8 md:pb-0 pt-6 md:pt-0 px-6 md:px-0 -mx-6 md:mx-0 touch-pan-x touch-pan-y`}>
         {group.screens.map((screen, i) => {
           // Stagger vertical offset for visual interest
           const yOffset = i % 2 === 0 ? 0 : 24;
@@ -278,7 +278,7 @@ export default function FeatureShowcase() {
   }, []);
 
   return (
-    <section ref={sectionRef} className="relative w-full py-32 md:py-48 px-6 overflow-hidden">
+    <section ref={sectionRef} className="relative w-full py-32 md:py-48 px-6 overflow-x-clip">
       {/* Section Header */}
       <div ref={headerRef} className="max-w-5xl mx-auto mb-10 text-center">
         <p className="text-sm uppercase tracking-[0.3em] text-[var(--color-axion-accent)] font-medium mb-4">Exclusive Features</p>

src/components/HeroSceneMobile.tsx

@@ -59,7 +59,7 @@ export default function HeroSceneMobile() {
   }, []);
 
   return (
-    <div ref={containerRef} className="w-full bg-[var(--color-axion-bg)] text-white overflow-hidden">
+    <div ref={containerRef} className="w-full bg-[var(--color-axion-bg)] text-white overflow-x-clip">
       {/* 1. Hero Entry */}
       <section className="relative min-h-[90svh] w-full flex flex-col items-center justify-between pt-[15vh] px-6">
         <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[150vw] h-[150vw] bg-[var(--color-axion-accent)]/10 blur-[120px] rounded-full pointer-events-none" />
@@ -95,7 +95,7 @@ export default function HeroSceneMobile() {
         </div>
 
         {/* Horizontal scroll of clocks on phones */}
-        <div className="w-full overflow-x-auto pb-8 snap-x snap-mandatory flex gap-6 px-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] fade-up relative z-20">
+        <div className="w-full overflow-x-auto pb-8 snap-x snap-mandatory flex gap-6 px-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] fade-up relative z-20 touch-pan-x touch-pan-y" data-lenis-prevent>
           {clockStyles.map((clock, i) => (
             <div key={i} className="snap-center shrink-0 flex flex-col items-center gap-6">
               <div className="relative w-[240px] sm:w-[260px] aspect-[9/20.5] rounded-[2rem] border-[3px] border-[#1a1a1a] overflow-hidden bg-black">
@@ -125,7 +125,7 @@ export default function HeroSceneMobile() {
         </div>
 
         {/* Horizontal scroll of depth wallpapers */}
-        <div className="w-full overflow-x-auto pb-8 snap-x snap-mandatory flex gap-6 px-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] fade-up relative z-20">
+        <div className="w-full overflow-x-auto pb-8 snap-x snap-mandatory flex gap-6 px-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] fade-up relative z-20 touch-pan-x touch-pan-y" data-lenis-prevent>
           {depthWallpapers.map((wp, i) => (
             <div key={i} className="snap-center shrink-0 relative w-[240px] sm:w-[260px] aspect-[9/20.5] rounded-[2rem] border-[3px] border-white/10 overflow-hidden bg-black">
               <Image src={wp.src} alt={wp.title} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover object-top" />

src/components/SmoothScrolling.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ReactLenis } from "lenis/react";
-import { ReactNode, useEffect, useRef } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 
@@ -13,30 +13,46 @@ interface SmoothScrollingProps {
 
 export default function SmoothScrolling({ children }: SmoothScrollingProps) {
   const lenisRef = useRef<any>(null);
+  const [isTouch, setIsTouch] = useState<boolean>(false);
 
   useEffect(() => {
+    const isTouchDevice =
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      window.matchMedia("(pointer: coarse)").matches;
+
+    setIsTouch(isTouchDevice);
+
     gsap.config({ force3D: true });
     ScrollTrigger.config({ 
       limitCallbacks: true,
       ignoreMobileResize: true 
     });
 
-    // Sync Lenis scroll with GSAP ticker to prevent jitter/bouncing
-    function update(time: number) {
-      lenisRef.current?.lenis?.raf(time * 1000);
+    if (!isTouchDevice) {
+      function update(time: number) {
+        if (lenisRef.current?.lenis) {
+          lenisRef.current.lenis.raf(time * 1000);
+        }
+      }
+    
+      gsap.ticker.add(update);
+      gsap.ticker.lagSmoothing(0); // Important for perfect sync
+    
+      return () => {
+        gsap.ticker.remove(update);
+      };
     }
-  
-    gsap.ticker.add(update);
-    gsap.ticker.lagSmoothing(0); // Important for perfect sync
-  
-    return () => {
-      gsap.ticker.remove(update);
-    };
   }, []);
 
+  if (isTouch) {
+    return <>{children}</>;
+  }
+
   return (
     <ReactLenis root ref={lenisRef} autoRaf={false} options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
       {children}
     </ReactLenis>
   );
 }
+