Scroll not working anymore on iPhone after sidebar close
Describe the Bug
Hi 👋 dear Payload team,
I'm opening this ticket for a not-so-important-but-quite-boring issue with the admin:
Issue
After changing the page from the sidebar (and closing it), the scroll stays locked on iPhone. We tested this issue on other devices (iPad, MacOS, Windows, Android) and it's fine, it's really iOS only. But it seems that all our clients are accessing their admin via their iPhone 😜
Workaround
If the user refreshed the page, then the scroll is
What I understood
I searched a bit already but not yet sure where it's coming from. I think it comes from the fact that the scroll is locked on purpose when opening the sidebar here: -> https://github.com/payloadcms/payload/blob/877b89962ec15f810e31325421cfd1bfa3b66cbe/packages/ui/src/elements/Nav/context.tsx#L78
And it seems that the disableBodyScroll method is not working properly? I saw it comes from this package https://github.com/willmcpo/body-scroll-lock but I am not sure it's maintained anymore.
Do we really need the scroll to be locked when the sidebar is open?
What I didn't understood
I tried to fix that on my side but without any luck for now. Let me know if there is anything I can do!
Reproduction
The issue does happen on a new instance, created with npx create-payload-app
I put a reproduction repo here: https://github.com/latte-macchiat-io/payloadcms-scroll-issue but it's really the state after the execution of the CLI.
You can also access the project here if it's easier for you to test with an iPhone:
- URL: https://d8k48wwgoo80gwg8k0sk40g4.payload-test.latte-macchiat.io/admin
- User: [email protected]
- Password: [email protected]
Thanks a lot for your help, And have a wonderful day ☀️
Link to the code that reproduces this issue
https://github.com/latte-macchiat-io/payloadcms-scroll-issue
Reproduction Steps
- Browser Admin with Safari on an iPhone
- Open the sidebar
- Click on one item of the sidebar (example: Users)
- Close the sidebar (not closed automatically)
- Scroll vertically or horizontally => NOK, the scroll is still locked.
Which area(s) are affected? (Select all that apply)
area: ui
Environment Info
Binaries:
Node: 20.11.1
npm: 10.2.4
Yarn: 1.22.22
pnpm: 9.7.1
Relevant Packages:
payload: 3.2.2
next: 15.0.3
@payloadcms/email-nodemailer: 3.2.2
@payloadcms/graphql: 3.2.2
@payloadcms/next/utilities: 3.2.2
@payloadcms/payload-cloud: 3.2.2
@payloadcms/richtext-lexical: 3.2.2
@payloadcms/translations: 3.2.2
@payloadcms/ui/shared: 3.2.2
react: 19.0.0-rc-66855b96-20241106
react-dom: 19.0.0-rc-66855b96-20241106