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

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;
}

Reproduisez le problème dans la démo shepherd-tester du dépôt avec html et body height: 100%, puis examinez le comportement de défilement de la visite. Le travail est terminé lorsque des défilements répétés permettent de garder la modale de la visite accessible au lieu de s'arrêter avec la modale hors de vue, sans dépendre du contournement CSS signalé.