Bug fixed: iOS Safari Modal Scrollbar it does not work

components/ui/Sidebar/Sidebar.tsx

@@ -1,11 +1,6 @@
 import s from './Sidebar.module.css'
 import Portal from '@reach/portal'
-import { FC, useEffect, useRef } from 'react'
-import {
-  disableBodyScroll,
-  enableBodyScroll,
-  clearAllBodyScrollLocks,
-} from 'body-scroll-lock'
+import { FC, useEffect } from 'react'
 
 interface Props {
   children: any
@@ -14,25 +9,19 @@ interface Props {
 }
 
 const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
-  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
 
   useEffect(() => {
-    if (ref.current) {
-      if (open) {
-        disableBodyScroll(ref.current)
-      } else {
-        enableBodyScroll(ref.current)
-      }
-    }
-    return () => {
-      clearAllBodyScrollLocks()
+    if (open) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'auto'
     }
   }, [open])
 
   return (
     <Portal>
       {open ? (
-        <div className={s.root} ref={ref}>
+        <div className={s.root}>
           <div className="absolute inset-0 overflow-hidden">
             <div
               className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"

package.json

@@ -20,7 +20,6 @@
     "@reach/portal": "^0.11.2",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.4",
-    "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
@@ -53,7 +52,6 @@
     "@graphql-codegen/typescript-operations": "^1.17.13",
     "@manifoldco/swagger-to-ts": "^2.1.0",
     "@next/bundle-analyzer": "^10.0.1",
-    "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/cookie": "^0.4.0",
     "@types/js-cookie": "^2.2.6",