Bottom of the page hidden on iOS

[pacwoodson]

There's a recurring issue on iOS browser, where the viewport size is fixed, whatever if the URL or action bar is displayed or not.
This result having 100vh usually larger that the actual screen, and not being able to scroll to the end of the page correctly.

Here is a video showing the bug: https://streamable.com/2yguzw

Found this https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ showing a work around, and implemented it in https://github.com/pakokrew/mooni/blob/develop/src/components/ScrollRoot.jsx, which looks like it solves pretty well the issue

Can I work on this issue ?

[bpierre]

@Yannis182del Yes! Thank you 🙏

[pacwoodson]

Here's the updated URL of implementation @Yannis182del ;)

https://github.com/pakokrew/mooni/blob/master/app/src/components/ScrollRoot.jsx

@pakokrew @bpierre Isn't this issue supposed to be on the aragon repo and not aragon-ui ?
Not really sure, i'm new to the project haha

https://github.com/aragon/aragon

[pacwoodson]

@Yannis182del the problem is coming from the ScrollView component in this aragon-ui repo

https://github.com/aragon/aragon-ui/blob/master/src/components/ScrollView/ScrollView.js

Thanks @pakokrew! I start to work on this ☺️

[eliobricenov]

Hi, @pakokrew @etherean06 is this issue still open?

[pacwoodson]

Hi, @pakokrew @etherean06 is this issue still open?

Hi, just tried again on Aragon client, and the bug is still present on Safari iOS.

Here's an updated link to my workaround:
https://github.com/pakokrew/mooni/blob/master/app/src/components/Utils/ScrollRoot.jsx

Do you want me to reupload the video showing the bug ?

[eliobricenov]

hey @pakokrew, yes, please.

[pacwoodson]

@eliobricenov there you are. Only happens on Safari iOS, not firefox.

replay_2.mp4

replay_1.mp4

[eliobricenov]

@pakokrew Thank you, that's helpful.

[eliobricenov]

I will hold working on this since I currently don't have a safari environment I can test on.