Issue with Drawer UI Freezing on iOS When Navigating Back via Gesture

[quickpanda]

Hello, I've recently started exploring frontend development and decided to use https://github.com/suyalcinkaya/onur.dev as a base for my website. I've encountered an issue specific to iOS devices where the UI freezes momentarily after navigating to a different link using the drawer component and then returning to the original page via a swipe gesture. This freeze lasts about 2~3 seconds (see the attached screen shot) and is not observed on Android devices, suggesting it might be related to how iOS caches the page before navigation.

Here's a brief overview of the problem:

Platform Affected: iOS only. Description: After using the drawer UI to navigate to a new page and then using a swipe gesture to return to the previous page, the UI freezes for approximately 5 seconds. This suggests that iOS might be caching the page's last state in a way that interferes with the smooth restoration of the UI. Reproduction Steps:

• Open the drawer UI.
• Click on a link to navigate to a new page.
• Use a swipe gesture to return to the original page.
• Observe the UI freeze.

Here is the link to the drawer component's source code for reference.

Any insights, suggestions for fixes, or similar experiences would be greatly appreciated. Thank you for your time and help!

[aakashbhadana]

I had a similar problem for my react PWA, so as a workaround solution, i used useEffect's cleanup function to close the drawer whenever the component unmounts. So that when i navigate back the drawer is not opened.

[quickpanda]

I had a similar problem for my react PWA, so as a workaround solution, i used useEffect's cleanup function to close the drawer whenever the component unmounts. So that when i navigate back the drawer is not opened.

Thanks, are you doing something like following? I try this, but it seems not working. BTW, I noticed that https://ui.shadcn.com/docs has the exact issue. the drawer UI will freeze when use the left menu drawer to navigate to new page then switch back to original page on ios.

import { useEffect, useState } from 'react';
import { Drawer } from 'vaul';
import { CommandIcon } from 'lucide-react';
import { MenuContent } from '@/components/menu-content';
import { Button } from '@/components/ui/button.jsx';

export function MobileDrawer() {
  const [isOpen, setIsOpen] = useState(false);

// use useEffect to clean up function to close the draw
  useEffect(() => {
    // This function gets called when the component unmounts
    return () => {
      setIsOpen(false); // Close the drawer
    };
  }, []); // Empty dependency array means this effect runs only on mount and cleanup runs on unmount

  const handleOpenChange = (open) => {
    setIsOpen(open);
  };

  return (
    <Drawer.Root shouldScaleBackground value={isOpen} onOpenChange={handleOpenChange}>
      <Button variant="ghost" size="icon" title="Toggle drawer" asChild onClick={() => setIsOpen(!isOpen)}>
        <Drawer.Trigger>
          <CommandIcon size={16} />
        </Drawer.Trigger>
      </Button>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 flex h-[80%] flex-col rounded-t-lg bg-gray-100">
          <div className="flex-1 overflow-y-auto rounded-t-[10px] bg-white p-4">
            <div className="mx-auto mb-8 h-1.5 w-12 shrink-0 rounded-full bg-zinc-300" />
            <MenuContent />
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

[emilkowalski]

Can you provide a demo with reproduction?

[quickpanda]

@emilkowalski this is the screenshot of using https://ui.shadcn.com/docs as example. When open the menu drawer and navigate to a new page. If using gesture to switch back to previous page, the menu will appear and uncontrollable for about 1 second. My site has exact same behavior when using drawer to navigate.

https://github.com/emilkowalski/vaul/assets/9373761/75e5d162-7312-4dcf-bfd2-f730d6d25b5c