Admin drawer not scrollable on iOS Safari (real device) – works in desktop emulation

[gabrielmedel]

Describe the Bug

On a real iPhone (Safari), the admin drawer (e.g., DocumentDrawer) cannot be scrolled with one finger. The drawer opens, but the content is “frozen”. In Chrome/Firefox devtools mobile emulation it scrolls fine. Upgrading to Payload 3.66.0 and adding CSS/JS workarounds did not fix it.

This issue is severely impacting our clients’ experience: they cannot scroll the admin drawer on their iPhones, which effectively blocks them from managing their website content on mobile. For many of our clients, mobile is their primary way to access the dashboard, so this bug makes routine content updates frustrating or impossible. We need a fix to restore basic content management usability on iOS devices.

Notes / Related
Similar symptoms to issue #10135 (“Safari iOS broken”).
This appears to be an upstream UI/iOS scroll handling problem rather than project CSS only.

Link to the code that reproduces this issue

https://github.com/payloadcms/payload/tree/main/templates/website

Reproduction Steps

Open the admin UI on a real iPhone Safari.
Open any drawer (e.g., edit document drawer).
Try to scroll the drawer content with one finger.
Observe that the content does not scroll (background remains locked or scrolls instead).

Expected behavior:

Drawer content should scroll normally with one finger on iOS Safari.
Actual behavior

No scrolling inside the drawer on real iOS Safari. Two-finger scroll sometimes moves, but one-finger scroll is blocked.

Workarounds tried (did not solve):

• CSS overrides: set 100dvh/overflow-y:auto/-webkit-overflow-scrolling:touch on .drawer and .drawer__content-children, touch-action:auto, overscroll-behavior:contain, body lock with overflow:hidden, position:fixed, overscroll-behavior:none.
• JS body lock: observe .drawer--is-open, fix body position, add touchmove handler to allow scroll only inside .drawer__content-children and preventDefault elsewhere.
• Still no scroll on real iPhone Safari.

Which area(s) are affected?

area: ui

Environment Info

Binaries:
  Node: 23.11.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 9.9.0
Relevant Packages:
  payload: 3.66.0
  next: 15.1.9
  @payloadcms/db-postgres: 3.66.0
  @payloadcms/drizzle: 3.66.0
  @payloadcms/email-nodemailer: 3.66.0
  @payloadcms/graphql: 3.66.0
  @payloadcms/live-preview: 3.66.0
  @payloadcms/live-preview-react: 3.66.0
  @payloadcms/next/utilities: 3.66.0
  @payloadcms/payload-cloud: 3.66.0
  @payloadcms/plugin-cloud-storage: 3.66.0
  @payloadcms/plugin-form-builder: 3.66.0
  @payloadcms/plugin-import-export: 3.66.0
  @payloadcms/plugin-nested-docs: 3.66.0
  @payloadcms/plugin-redirects: 3.66.0
  @payloadcms/plugin-search: 3.66.0
  @payloadcms/plugin-seo: 3.66.0
  @payloadcms/richtext-lexical: 3.66.0
  @payloadcms/storage-s3: 3.66.0
  @payloadcms/translations: 3.66.0
  @payloadcms/ui/shared: 3.66.0
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:33:00 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 65536
  Available CPU cores: 12