Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Mobile scrolling problem #1060

Closed
zackkrida opened this issue Mar 4, 2022 · 0 comments · Fixed by #1257
Closed

Mobile scrolling problem #1060

zackkrida opened this issue Mar 4, 2022 · 0 comments · Fixed by #1257
Labels
🕹 aspect: interface Concerns end-users' experience with the software 🛠 goal: fix Bug fix 🟨 priority: medium Not blocking but should be addressed soon 🔧 tech: vue Requires familiarity with Vue.js

Comments

@zackkrida
Copy link
Member

Description

Mobile web sites commonly use scroll detection on the <body> element to hide/toggle ui elements. For example, mobile Firefox on Android uses this to hide/show the address bar in the footer.

Because we're not scrolling the body, and instead scrolling an internal element for the search results area, the browser never detects user scroll and never hides the the address bar.

Reproduction

  1. Go to search.openverse.engineering on an android device in Firefox
  2. Make a search and scroll the page
  3. Observe that the browser bottom addressbar never hides itself
  4. Bonus: Play an audio file and observe the global audio player is partially obscured behind the address bar!

The fix for this would be to reassess our global layout. Some potential solutions:

  1. On mobile only, enable body overflow scroll and make the header sticky with a top position of zero
  2. Revise the entire layout with a truly sticky header, and sticky or fixed position for the filters sidebar. The main content area will need a hardcoded padding or margin end to prevent the sidebar from covering the page contents.
@zackkrida zackkrida added 🟨 priority: medium Not blocking but should be addressed soon 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🛠 goal: fix Bug fix 💻 aspect: code Concerns the software code in the repository labels Mar 4, 2022
@obulat obulat added 🕹 aspect: interface Concerns end-users' experience with the software 🔧 tech: vue Requires familiarity with Vue.js and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 💻 aspect: code Concerns the software code in the repository labels Mar 18, 2022
@zackkrida zackkrida mentioned this issue Apr 11, 2022
Merged
7 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
🕹 aspect: interface Concerns end-users' experience with the software 🛠 goal: fix Bug fix 🟨 priority: medium Not blocking but should be addressed soon 🔧 tech: vue Requires familiarity with Vue.js
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix app layout issues WordPress/openverse-frontend
2 participants
@zackkrida @obulat