fix: mobile nav on ios could scroll its background

src/components/Common/Search/Search.tsx

@@ -6,6 +6,7 @@ import { PageSearchResult } from "@site/search/src/declarations/search/search.di
 import { createFocusTrap } from "focus-trap";
 import Link from "@docusaurus/Link";
 import { trackEvent } from "@site/src/utils/matomo";
+import useLockBodyScroll from "../../../utils/use-lock-body-scroll";
 
 let initialTerm = "";
 let initialResults: PageSearchResult[] | null = null;
@@ -26,6 +27,8 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
   >({});
   const [loading, setLoading] = useState(false);
 
+  useLockBodyScroll(dialogRef);
+
   useEffect(() => {
     actorRefPromise.current = import("./actor").then(({ createActor }) => {
       console.log("search module loaded");
@@ -52,9 +55,7 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
 
     window.addEventListener("keydown", onKeydown);
 
-    document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = "unset";
       window.removeEventListener("keydown", onKeydown);
       trap.deactivate();
     };
@@ -104,7 +105,15 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
   return (
     <>
       <motion.div
-        className="fixed inset-0 backdrop-blur-lg z-[3001] overflow-auto"
+        className="fixed h-screen inset-0 backdrop-blur-lg z-[3001] touch-none"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        aria-modal="true"
+      ></motion.div>
+      <motion.div
+        className="fixed max-h-screen top-0 left-0 right-0 z-[3002] overflow-auto"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
@@ -113,7 +122,7 @@ const Search: FC<{ onClose: () => void }> = ({ onClose }) => {
         aria-modal="true"
       >
         <div
-          className="md:container-10 backdrop-blur-0"
+          className="md:container-10 backdrop-blur-0 touch-auto"
           aria-label="Search the website"
         >
           <div

src/theme/Layout/index.js

@@ -56,7 +56,6 @@ export default function Layout(props) {
         </ErrorBoundary>
       </div>
       {!noFooter && <Footer editPath={editPath} />}
-      <div id="search-overlay-portal"></div>
     </LayoutProvider>
   );
 }

src/utils/use-lock-body-scroll.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+const useLockBodyScroll = (modalRef: React.RefObject<HTMLDivElement>) => {
+  useEffect(() => {
+    // Get original body overflow
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    const originalTouchAction = window.getComputedStyle(
+      document.body
+    ).touchAction;
+
+    // Prevent scrolling on mount
+    document.body.style.overflow = "hidden";
+    document.body.style.touchAction = "none";
+
+    // Re-enable scrolling when component unmounts
+    return () => {
+      document.body.style.overflow = originalStyle;
+      document.body.style.touchAction = originalTouchAction;
+    };
+  }, [modalRef]); // Empty array ensures effect is only run on mount and unmount
+};
+
+export default useLockBodyScroll;