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

Tái hiện vấn đề trong bản demo shepherd-tester của repository bằng cách sử dụng html và body height: 100%, sau đó kiểm tra hành vi cuộn của tour. Công việc hoàn tất khi việc cuộn lặp lại vẫn giữ cho modal của tour có thể truy cập được thay vì dừng lại khi modal nằm ngoài vùng hiển thị, mà không cần dựa vào CSS workaround đã được báo cáo.