-
Notifications
You must be signed in to change notification settings - Fork 72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Black space appears when mobile keyboard is visible #47
Comments
Hi @navnis👋 This doesn't seem to be happening in the example app (at least on my iPhone) so it's a bit difficult to tell what is happening on your end. Default keyboard: SwiftKey keyboard: Can you provide a reproduction eg. in CodeSandbox? |
Hey @Temzasse In your example app also this issue persists... scenario - I tried to scroll on the right side of the sheet... OS - iOS 2021-09-13.at.8.49.49.PM.mp4 |
This is also happening in the example app for me. bug.modal.sheet.mp4 |
I have quite limited amount of time to work on this lib at the moment so it would be amazing if someone could help me out by figuring out the reason for this issue and then create a PR 😄 I think the most likely cause for these scrolling related issues has something to do with body scroll locking. Framer Motion should automatically lock body scrolling for any gestures that are applied to draggable elements but clearly it's not working 100% robustly in all cases. |
Hey @Temzasse was there any updates on this one? I tried debugging this but not yet found a way around this. |
@shivamragnar unfortunately I don't have the bandwidth to investigate issues like this which are not easily reproducible 😞 I could not reproduce this when I initially tried to debug it so it is very difficult to fix something you can't reproduce. |
@Temzasse It's alright, but it can be easily seen in the example app specifically in Slack Message example in iOS Safari. |
i think you need to set a |
This issue is probably caused by y value being smaller than 0. Since y value makes transform: translateY(y), being it smaller than 0 makes action sheet container float. Could it be solved by restricting minimum y value to 0? @Temzasse. y value becomes smaller than 0 because window.height changes when screen keyboard pops up. |
@atlasbc good suggestion about restricting the minimum value for y to be 0 👍🏻 I'll investigate how this can be done with Framer Motion. |
Restricting the |
Using a better body scroll locking implementation from React Aria (usePreventScroll) seems to mitigate this issue. I also added the |
If we will try to pull the sheet upwards forcefully Black space appears when the mobile keyboard is visible. Black space is visible just above the keyboard.
Browser(Android)- Chrome(92.0.4515.159)
Browser(iOS)- Safari
react-model-sheet (v1.4.1)
In iOS
In Android
The text was updated successfully, but these errors were encountered: