fix: update use-prevent-scroll to fix iOS Safari flickering

[SimonEggert]

fixes #231

I've updated the use-prevent-scroll.ts file to the most up-to-date version of the upstream library. Unfortunately, it uses getNonce.ts which only got introduced a few days ago, so it is not available in @react-aria/utils package just yet. I copied it over for now and added a TODO.

However, I tried a packed version of this change and could verify that it indeed resolves the flickering mentioned in the above issue. Could you please check if this would be an applicable solution or if anything prevents the update from being made?

[SimonEggert]

This seems to introduce some regressions unfortunately, so I'm closing the PR. FFR:

• drag to close doesn't work anymore, similar issue as seen in this video (Sheet not closing on mobile  #154 (comment))
• background behind the sheet can be scrolled 😢

[Temzasse]

Hey @SimonEggert 👋🏻

Thanks for opening this PR. I was actually just doing the exact same thing and trying to update the usePreventScroll utility hook to the latest React Aria version and I also noticed that it caused some regression.

I'll try to investigate if there is some middle ground solution that would fix the issue you mentioned while not creeping in any regressions. However I'm a bit skeptical about my ability to fix the issue as the iOS scroll prevention logic is pretty much black magic to me 😅 Let's hope AI can help here 🤞🏻

Please feel free to submit new PRs if you manage to find a fix 😊

[SimonEggert]

Thanks for looking into this as well! FWIW, I forked and tested without margin-top and window.scrollTo as you can see here.

With this combination, drag to close works and the flicker issue is gone. However, in the code there are comments about margin-top + scrollTo being required in order to prevent undesired Safari iOS scrolling when focusing inputs inside the Sheet, so I am not sure if this creates other issues of its own.

I will let you know if I find out anything else. Fingers crossed your AI is better than mine – I haven't had any success so far 😄

About the black magic: I found this to be a good writeup of the possible options:
https://weser.io/blog/scroll-blocking-overlays