Scrollbar behind questions UX bug

SomeMoosery commented 4 years ago

Prerequisites

[x] Put an X between the brackets on this line if you have done all of the following:
- Reproduced the problem in QA
- Followed all applicable steps in the TROUBLESHOOTING guide: TODO
- Checked for relevant discussions on Discord: https://discord.gg/pPERUuv
- Checked that your issue isn't already filed: https://github.com/COVID-19-electronic-health-system/Corona-tracker/issues

Description

When on the education page, if you scroll outside the range of flashcards, the page scrolling can make the experience a little bit jarring. An idea to fix this could be disable scrolling on this page specifically, or perhaps making the div surrounding the cards fill the screen.

Frankly, I'm not an expert in frontend/CSS stuff - so if this is impossible due to mobile browsers allowing users to always pull "above" and "below" pages a little bit (think how you swipe to refresh a page) - this may not be possible. Feel free to push back!

ezgif com-video-to-gif (5)

Steps to Reproduce

Login
Navigate to flashcards
Swipe on and around cards

Expected behavior:

The page doesn't scroll

Actual behavior:

The page scrolls behind the flashcards

Reproduces how often:

100%

Versions

0.3.9

gitalink commented 4 years ago

I will look into this issue.

gitalink commented 4 years ago

Have it working right locally, will test tomorrow morning if nothing else broke and make a PR.

gitalink commented 4 years ago

Hey, I attempted to fix the issue and made my first PR here: https://github.com/COVID-19-electronic-health-system/Corona-tracker/pull/473,

It is my first PR, not sure if I managed to follow all the conventions, let me know if something needs to be changed.

COVID-19-electronic-health-system / Corona-tracker