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

Abierto
#1,030 5 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
frontend

Línea de trabajo

Reproduce el problema en la demo shepherd-tester del repositorio usando html y body height: 100%, y luego inspecciona el comportamiento de desplazamiento del tour. El trabajo estará terminado cuando el desplazamiento repetido mantenga accesible el modal del tour en lugar de detenerse con el modal fuera de la vista, sin depender de la solución alternativa de CSS indicada.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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;
}
Lenguaje dominante
TypeScript
Estrellas
238
Forks
50
Merge medio
1 min
PR fusionados (30 d)
9

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de shipshapecode/angular-shepherd

Todos los issues de shipshapecode/angular-shepherd

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.