[WIP] Mobile Web Safari - Keyboard Visible Overscroll - Fix

[sidferreira]

Address unusual behaviour found at ...

Details

Fixed Issues

$ GH_LINK

Tests

QA Steps

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[roryabraham]

@sidferreira What you've got here looks good so far. I think to resolve the other issue @kidroca pointed out, we might need to just disable scrolling events on the ReportActionCompose component?

Edit: maybe not actually, that would defeat the purpose of the autoScrollback 😅

[sidferreira]

@roryabraham Although my initial suggestion was about disabling the scroll browser-wise, my tests were in the ReportActionCompose. I'm just trying to reproduce @kidroca issue, but I think we may have it addressed now.

[kidroca]

I don't think we can do anything to get rid of the 2nd scrollbar
It was pointed out earlier that one of the scrolls is actually "outside" the browser
So we have one scroll from the FlatList and one to accommodate the shrinkage caused by showing the keyboard
When we swipe inside the FlatList it drags report actions up and down
But anything outside of the FlatList would be dragging the whole window

Something else that I've noticed is the keyboard size might vary

• word suggestion is enabled
• or when a custom keyboard app is used

[sidferreira]

@kidroca but this dual scrollbars was happening before anyways, right?

[sidferreira]

@roryabraham I think there's a workaround that would resize the app to fit in the available viewport space. It may get squished but will avoid the double scroll... it didn't work

[kidroca]

Hmm I actually only saw the 2 two scrollbars on the Simulator
On the Safari (Chrome as well) on my iPhone I don't see a scroll bar at all when I'm scrolling through the conversation
And a single scrollbar when I scroll with the Keyboard open, but it's for the whole window

• iOS 15.1

[sidferreira]

@kidroca you mean after the scroll fix?

[kidroca]

@kidroca you mean after the scroll fix?

I'm not sure, I used staging.new.expensify.com (did the fix make it there?), but I think it was that way even before the fix

[sidferreira]

@roryabraham I checked and the double scrollbar was an issue even before the scrollback, so I would like to consider it "out of scope"

[sidferreira]

@pecanoro #6621 can you try to reproduce the issue in this branch?

[sidferreira]

@kidroca can you retry the issue you had with different languages/keyboards?

[sidferreira]

@kidroca @parasharrajat @pecanoro @roryabraham I couldn't reproduce most issues, but did slight changes that should address them. Can anyone help me with the tests?

[pecanoro]

@roryabraham @parasharrajat @Gonals Could you guys see if the PR fixes the issue for mobile safari? I am having some issues with the mobile environment since I got the new M1 laptop so I can't test it out.

[parasharrajat]

I can't test it, I am on IOS 14 but I will try.

[roryabraham]

@sidferreira I recently learned that it's possible on iOS 15 to move the address bar to the top of the screen on iOS Safari. I think that might be another edge case here.

[parasharrajat]

@sidferreira Please add the issues link and description to the PR before we can test it. Thanks.

[Gonals]

@sidferreira, I've set this as WIP (Work in Progress). Feel free to remove it when this is ready for review!

[sidferreira]

@roryabraham I decided to spend some extra time on this, trying to find a better solution, but I honestly think that there's no silver bullet.

I even checked Ionic Framework if they handled it somehow and they face the very same issue.

The whole problem is a difference between iPadOS and iOS: when the keyboard is shown in iPad, it will resize the window, allowing us to know the proper keyboard size. iOS in other hard doesn't do that. ( https://stackoverflow.com/a/66709611/251820 )

Although it modifies the visualViewport, it will do a parallax effect, in a way that it is not 100% reliable to use it as well.

As I work on this I notice that the efforts on Mobile Safari team is to make it the new Internet Explorer.

Long story short, I believe that the "Scrollback" is not a viable solution, and I'm not sure if there's any solution at all.

cc @parasharrajat

[roryabraham]

I've had difficulty keeping track of all the issues we have with our current implementation, can we summarize the issues we can observe with the scrollback implementation in mobile safari?

[parasharrajat]

I agree, lets see what are the issues and what is the solution, and how is that not working? Then, we can decide what should be done.

[sidferreira]

@roryabraham @parasharrajat

The main/initial issue

On Mobile Safari, if the compose input is focused and you scroll down, a gap will show up below the app it self, keeping a ~100px white space below it.

The cause

After many research, we can mainly refer https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d to find out that this behavior is intended by Mobile Safari developers and no plans to change how it works.

What happens is that instead of only resizing the viewport, Safari will add a "padding" at the bottom, causing a parallax effect when the content moves up.

The challenge

The challenge to fix it is that there's no way to be sure the size of the said padding, changing from device to device, as well as from keyboard type to keyboard type, as well as language, suggestions.

Also, there's the floating address bar, which there's no information browser wise the size of it, if it is positioned on bottom or top, etc.

Long story short, there's no silver bullet to get the keyboard size. I tried a few workarounds but most of them weren't that effective.

The final note is that it happens in many other platforms, for example Ionic Framework.

[parasharrajat]

Thanks for the explanation @sidferreira. If we can't fix this then I think it better would revert the original PR.