shipshapecode / shipshapecode/angular-shepherd
Scrolling during a tour is buggy if height is set to 100% on body and html
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
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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