reactjs / reactjs/react.dev

Mobile in-app browser navigation glitching

Offen
#656 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das Navigationsverhalten im In-App-Browser von Reddit zu reproduzieren und es mit mobilem Chrome, Safari und Firefox zu vergleichen. Untersuche die Navigation und das CSS der Website und verifiziere anschließend, dass die Navigation konsistent positioniert ist und dass das Scrollen innerhalb der Navigation den dahinterliegenden Inhalt weder sichtbar macht noch verschiebt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
css, javascript, react
Bereich
frontend, web-dev
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
28/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.