[bug]: Drawer ScrollArea frezzes swiping on ios

[Mr-Vipi]

Describe the bug

Im using the drawer component as below:

  <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
    <aside className="sticky bottom-0 w-full bg-white text-center shadow-summaryStroke md:hidden">
      <DrawerTrigger className="flex w-full flex-col items-center">
        <ChevronUp className="mt-2 size-6 animate-bounce text-personalizedOrange" />
        <div className="flex w-full justify-around">
          <h4 className="text-2xl font-semibold">Pay Now</h4>
          <div className="flex flex-col items-center">
            <h4 className="text-2xl font-semibold">Total</h4>
            {showLoader ? (
              <LoaderCircle className="h-7 w-7 animate-spin text-personalizedOrange" />
            ) : (
              <p className="text-xl">{totalAmount} $</p>
            )}
          </div>
        </div>
      </DrawerTrigger>
      <DrawerContent className="mx-2 max-h-[85vh] px-4 pb-2">
        <ScrollArea className="mt-4 overflow-y-auto">
          <SummaryBooking
            pickUpFee={form.watch("pickUpLocation")}
            dropOffFee={form.watch("dropOffLocation")}
            nightsSelected={nightsSelected}
            serviceFee={serviceFee}
            dates={form.watch("dateRange")}
            values={values}
            totalAmount={totalAmount}
            isFormValid={form.formState.isValid}
            setIsDrawerOpen={setIsDrawerOpen}
            selectedExtras={selectedExtras}
          />
        </ScrollArea>
      </DrawerContent>
    </aside>
  </Drawer>

  The issue that im having is that the scrolling inside the dreawer doesnt work always in safari sometimes it stucks and you cant scroll. you can remove unblock it only when you close the drawer.

  this issue seams to happen only on safari on ios.
  on chrome, firefox, opera it works perfectly.

https://github.com/shadcn-ui/ui/assets/58825526/55524f45-72ed-494b-ac65-193169226231

in this video is the drawer, the first time that i open it it works as it should the second time after the first vertical swipe it frezzed and you can only close it when you click the continue button or out of the drawer screen.

Affected component/components

Drawer, ScrollArea

How to reproduce

in this video is the drawer, the first time that i open it it works as it should the second time after the first vertical swipe, it frezzes and you can only close it when you click the continue button or out of the drawer screen.

Codesandbox/StackBlitz link

No response

Logs

no logs

System Info

ios 17.5.1

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[devStr0ke]

did you manage to fix that bug ? Im having the exact same thing

[dominguetigs]

@Mr-Vipi @devStr0ke

I was having the same problem. In my case, I added the ScrollArea and the parameters below and the problem was resolved.

<Drawer
      preventScrollRestoration={false}
      disablePreventScroll
      noBodyStyles
>
      <DrawerTrigger asChild>
          ...
      </DrawerTrigger>
      <DrawerContent className="max-h-[calc(100dvh-2rem)]">
          <ScrollArea className="overflow-y-auto">
             ...
          </ScrollArea>
      </DrawerContent>
</Drawer>

[jsdmas]

@Mr-Vipi @devStr0ke

I also experienced the same bug only on iOS, not on Android phones. The cause of the problem is likely due to a conflict between the bottom URL input bar on iOS phones and the device height. In my case, I resolved it by using window.scrollTo(0, 0); when the drawer operates.