Scroll not working anymore on iPhone after sidebar close

[n0mad-d3v]

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:
->

payload/packages/ui/src/elements/Nav/context.tsx

Line 78 in 877b899

enableBodyScroll(navRef.current)

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

[Matt-roki]

Can confirm this is still a bug on the latest payload version

Easy to reproduce open navbar select a different collection and you cannot scroll.

[n0mad-d3v]

This should be soon closed thannks to this commit: c7ad46c thanks to @jacobsfletch 🤞
Let's wait for the next version to be released!

[jacobsfletch]

Thanks for following up on this @n0mad-d3v. Yes this should get fixed in the next release when this change goes out. I meant to open a PR and link this issue but am moving too fast. Here's a breakdown of the fix:

The body-scroll-lock package appears to be the problem, as you've pointed out. We use this package to traverse the DOM and prevent the underlying page body from scrolling. It seems to incorrectly lock the scrollable elements themselves, however. There are a number of open issues directly related to this, such as willmcpo/body-scroll-lock#274. This package appears to be unmaintained, though. Fortunately, CSS has come a long way, and we can now take advantage of the overscrollBehavior property.

[n0mad-d3v]

Hey @jacobsfletch and thanks a lot for the explanation! I'm glad I succeeded to point out the issue, I'm sad I wasn't able to fix it, I'm super happy you fixed it and no worries for the issue link, the most important is that it'll be fixed! 🔥 Many many thanks 🙏

I'll keep an eye on the release of the 3.21.0 and close this issue as soon as it's out, so you don't have to care about it anymore 😜

Thanks again!