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

Open
#1,030 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
frontend

Research direction

Reproduce the issue in the repository's shepherd-tester demo using html and body height: 100%, then inspect the tour's scrolling behavior. The work is done when repeated scrolling keeps the tour modal reachable instead of stopping with the modal out of view, without relying on the reported CSS workaround.

Written by the indexing model from the issue text.

Description

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;
}
Dominant language
TypeScript
Stars
238
Forks
50
Avg merge
1m
Merged PRs (30d)
9

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from shipshapecode/angular-shepherd

All issues in shipshapecode/angular-shepherd

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.