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

html と body height: 100% を使ってリポジトリの shepherd-tester デモで問題を再現し、その後、tour のスクロール動作を調査します。報告された CSS workaround に頼らず、繰り返しスクロールしても tour modal にアクセスでき、modal が画面外に出た状態で停止しなければ作業完了です。