reactjs / reactjs/react.dev

Mobile in-app browser navigation glitching

Open
#656 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

Opened up an article inside the Reddit in-app browser and noticed some funky glitching in the navigation.

Issue
On open, the nav starts half-scrolled, and then on scroll you can see the bottom of the text going behind the navigation.

On mobile Chrome, Safari, and Firefox, the same thing happens- where if the user scrolls inside the nav, the content behind it scrolls- you just can't see it in these browsers due to correct screen positioning of the nav. The in-app browser seems to force the nav to have some kind of margin at the bottom.

bug-f

This definitely could also be a gatsby problem, reddit mobile problem, in-app browsers as a whole problem, or this particular site problem. I also never throw out the possibility of it being a problem with my own device. I'll poke around and see what I can find.

Sidenote: I also have a CSS hack fix that prevents background content from scrolling when the user scrolls in the nav. I'll open a new issue for that if that's wanted.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the navigation behavior in the Reddit in-app browser and compare it with mobile Chrome, Safari, and Firefox. Inspect the site's navigation and CSS, then verify that the navigation is positioned consistently and that scrolling within it does not expose or move the content behind it.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.