fix ios scroll, i tested on xcode, took forever to download ffs

Author: fccview

app/_components/FeatureComponents/Notes/Parts/SwipeNavigationWrapper.tsx

@@ -91,7 +91,7 @@ export const SwipeNavigationWrapper = ({
   }
 
   return (
-    <div ref={wrapperRef} className="relative w-full h-full overflow-x-hidden" style={{ touchAction: "pan-y" }}>
+    <div ref={wrapperRef} className="relative w-full h-full overflow-x-hidden">
       <div
         ref={currentRef}
         className="relative z-10 w-full h-full"
@@ -103,7 +103,7 @@ export const SwipeNavigationWrapper = ({
         <div
           ref={prevRef}
           className="absolute inset-0 z-20 bg-background pointer-events-none"
-          style={{ opacity: 0 }}
+          style={{ opacity: 0, display: "none" }}
         >
           <iframe
             src={prevUrl}
@@ -118,7 +118,7 @@ export const SwipeNavigationWrapper = ({
         <div
           ref={nextRef}
           className="absolute inset-0 z-20 bg-background pointer-events-none"
-          style={{ opacity: 0 }}
+          style={{ opacity: 0, display: "none" }}
         >
           <iframe
             src={nextUrl}

app/_hooks/useSwipeNavigation.ts

@@ -6,6 +6,7 @@ interface UseSwipeNavigationProps {
   enabled: boolean;
   onNavigateLeft: () => void;
   onNavigateRight: () => void;
+  onSwipingChange?: (swiping: boolean) => void;
   wrapperRef: RefObject<HTMLDivElement | null>;
   currentRef: RefObject<HTMLDivElement | null>;
   prevRef: RefObject<HTMLDivElement | null>;
@@ -59,13 +60,20 @@ export const useSwipeNavigation = ({
   enabled,
   onNavigateLeft,
   onNavigateRight,
+  onSwipingChange,
   wrapperRef,
   currentRef,
   prevRef,
   nextRef,
   hasPrev,
   hasNext,
 }: UseSwipeNavigationProps) => {
+  const _setOverlaysVisible = (visible: boolean) => {
+    const display = visible ? "" : "none";
+    if (prevRef.current) prevRef.current.style.display = display;
+    if (nextRef.current) nextRef.current.style.display = display;
+  };
+
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
   const directionLockedRef = useRef<"horizontal" | "vertical" | null>(null);
   const navigatingRef = useRef(false);
@@ -96,6 +104,7 @@ export const useSwipeNavigation = ({
       _setWillChange(currentRef.current, false);
       _setWillChange(prevRef.current, false);
       _setWillChange(nextRef.current, false);
+      _setOverlaysVisible(false);
     };
 
     if (transition && wasSwiping) {
@@ -160,6 +169,7 @@ export const useSwipeNavigation = ({
       }
       directionLockedRef.current = "horizontal";
       swipingRef.current = true;
+      _setOverlaysVisible(true);
       _setWillChange(currentRef.current, true);
       _setWillChange(prevRef.current, true);
       _setWillChange(nextRef.current, true);

app/_styles/globals.css

@@ -665,6 +665,11 @@ pre.text-foreground span,
     scrollbar-width: auto !important;
 }
 
+.jotty-scrollable-content {
+    transform: translateZ(0);
+    -webkit-overflow-scrolling: touch;
+}
+
 .overflow-x-auto::-webkit-scrollbar {
     height: 8px;
 }