aragon / ui

🦚 UI kit for decentralized apps
https://ui.aragon.org/
MIT License
343 stars 127 forks source link

Bottom of the page hidden on iOS #747

Open pacoccino opened 4 years ago

pacoccino commented 4 years ago

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

ghost commented 4 years ago

Can I work on this issue ?

bpierre commented 4 years ago

@yannis182del Yes! Thank you :pray:

pacoccino commented 4 years ago

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

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

ghost commented 4 years ago

@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

pacoccino commented 4 years ago

@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

ghost commented 4 years ago

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

eliobricenov commented 3 years ago

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

pacoccino commented 3 years ago

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 commented 3 years ago

hey @pakokrew, yes, please.

pacoccino commented 3 years ago

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

https://user-images.githubusercontent.com/1371207/108166434-9dbf3700-710d-11eb-8f68-519642b8a31d.mp4

https://user-images.githubusercontent.com/1371207/108166455-a3b51800-710d-11eb-9eb5-231e6d4b94e7.mp4

eliobricenov commented 3 years ago

@pakokrew Thank you, that's helpful.

eliobricenov commented 3 years ago

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

giaset commented 3 years ago

Hey all, just started building a project on Aragon UI and was wondering if there was any updates on this, as it's still an issue...

githubdoramon commented 3 years ago

@giaset are you facing the same issue? If so, feel free to create a PR with the fix so the team can review it