Black space appears when mobile keyboard is visible

[navnis]

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

[Temzasse]

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?

[navnis]

Hey @Temzasse

You can go to Teasit And then you can follow the steps from the videos that I have attached to recreate that scenario...

Android

https://user-images.githubusercontent.com/38049137/133081818-9d2ea116-f25f-4be9-a124-468103d5f307.mp4

https://user-images.githubusercontent.com/38049137/133082165-e1f6334f-d861-446a-b2df-c456e491e251.mp4

iOS

https://user-images.githubusercontent.com/38049137/133083599-8181e2f6-dd9c-4207-92f4-e49bc2cd1e47.mp4

[navnis]

Hey @Temzasse

In your example app also this issue persists... I have attached the video...

scenario - I tried to scroll on the right side of the sheet...

OS - iOS Browser - Safari

https://user-images.githubusercontent.com/38049137/133111392-1a7bec5c-54f5-4076-b7e6-b612711dee9d.mp4

[alex-cory]

This is also happening in the example app for me.

https://user-images.githubusercontent.com/5455859/133119350-7991b596-296a-4b70-8ab3-b290e7a92626.mp4

[Temzasse]

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.

[shivamragnar]

Hey @Temzasse was there any updates on this one? I tried debugging this but not yet found a way around this.

[Temzasse]

@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.

[shivamragnar]

@Temzasse It's alright, but it can be easily seen in the example app specifically in Slack Message example in iOS Safari.

[niklasgrewe]

i think you need to set a min-height: 100vh to the html element.

[atlasbc]

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.

[Temzasse]

@atlasbc good suggestion about restricting the minimum value for y to be 0 👍🏻 I'll investigate how this can be done with Framer Motion.

[Temzasse]

Restricting the y value didn't help. It seems that this is a "feature" in iOS Safari and not really a bug in the library: https://stackoverflow.com/questions/56351216/ios-safari-unwanted-scroll-when-keyboard-is-opened-and-body-scroll-is-disabled

[Temzasse]

Using a better body scroll locking implementation from React Aria (usePreventScroll) seems to mitigate this issue. I also added the y value restriction just to be safe. Hopefully this is now fixed in v1.6.2.