shipshapecode / shipshapecode/angular-shepherd

Scrolling during a tour is buggy if height is set to 100% on body and html

Offen
#1,030 5 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
TypeScript
Sterne
238
Forks
50
Ø Merge
1 Min.
Gemergte PRs (30 T.)
9

Beschreibung

If you style your Angular app's "body" and "html" tags with "height: 100%" and then start a tour, scrolling will partially work (just as the demo "shepherd-tester" in the repo), but if you scroll up and down a bit, scrolling will suddenly stop working and you might get stuck with the tour modal out of view.

So if you have

body, html {
    height: 100%;
}

in your styles.css, and want to use Angular Shepherd without the buggy scroll behavior, you need to find another way to make your app have full width/height with regards to the browser window.

One workaround that seems to work for me so far is:

styles.css

html, body {
  min-height: 100vh;
  margin: 0;
}
body {
  display: flex;
}

app.component.css

:host {
    flex: 1;
}

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

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

Reproduziere das Problem in der shepherd-tester-Demo des Repositorys mit html und body height: 100% und untersuche anschließend das Scrollverhalten der Tour. Die Arbeit ist abgeschlossen, wenn wiederholtes Scrollen das Tour-Modal weiterhin erreichbar hält, anstatt mit einem nicht sichtbaren Modal zu enden, ohne auf den gemeldeten CSS-Workaround angewiesen zu sein.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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