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

[daghendrik]

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

[RobbieTheWagner]

@daghendrik our demo page has height: 100% on the body https://shepherdjs.dev/ so I am not sure that this is your actual issue.

[daghendrik]

@rwwagner90 Thank you for responding so quickly. You are probably right. However it seems to be a problem that's related to the height, but maybe in combination with some other dependencies or configurations?

The problem exists in my Angular 13 SPA, but to verify that it's just not my project that suffers from the issue I tried to reproduce it by using using a fairly popular angular material starter template and adding the example from the Angular Shepherd readme.

I basically just forked tomastrajan/angular-ngrx-material-starter and added [email protected] to it:

daghendrik/angular-ngrx-material-starter@630af05

You can reproduce the issue by cloning daghendrik/angular-ngrx-material-starter and performing npm install & npm start

You will then see that scrolling is locked (unlike in angular-shepherd-master\projects\shepherd-tester) and that clicking inside the modal and then scrolling will allow you to scroll for a while before the scrolling is locked.

Tried to illustrate with a GIF, see below. Maybe this gives you a clue to why it's happening? In the example above, I added v 12.0.0, but the same happens in my Angular 13 app with "angular-shepherd": "13.0.1".

[RobbieTheWagner]

@daghendrik I suspect something with the styles or JS included with Angular NgRx Material is causing issues here. Are there any errors in the console? I believe what hides the tooltip when scrolled off the page is a Popper modifier, so I wonder if that library is also using Popper and conflicting? It's really hard to know for sure. I would recommend trying removing the CSS files from that starter and trying to narrow down what needs to be removed before Shepherd and scrolling work again.

[daghendrik]

No errors in the console, but if I manually remove (in chrome's dev console) the "height: 100vh" of the svg element that shepherd creates to produce the grayed out layer just below the modal, then scrolling and everything works just as the demo (except the grayed out SVG "layer" not being shown, of course)

If I use my workaround, and not having body set to "height: 100%" in my styles.css, then things work fine.

[RobbieTheWagner]

@daghendrik can you please try removing all your extra styles added by your framework? This is not something to be fixed in Shepherd, but rather some additional styles or logic your framework is including that break things.