gleam-lang / language-tour

👩🏽‍💻 Learn Gleam in your browser
https://tour.gleam.run/
74 stars 55 forks source link

Nav-bar scroll bug on MS Edge #46

Closed Rudxain closed 4 months ago

Rudxain commented 4 months ago

MSE has this "feature" that emulates Android's "elastic scrolling". It doesn't work with arrow-keys, only touch-screens and touch-pads (maybe even scroll-wheels?). This allows users to do silly stuff, like this:

Navigation bar is slightly offset downwards, causing it to be rendered behind/under all other elements

This could (untested) be resolved by

/*
`class` doesn't matter,
all `<nav>`s should have this rule.
*/
nav {
  position: fixed;
  z-index: 8; /* is this high enough? */
}

Versions tested:

lpil commented 4 months ago

Oh how odd! What's happening here? Is the top bar coming away from the top of the page ?

Rudxain commented 4 months ago

Is the top bar coming away from the top of the page ?

I guess. It gets offset downwards when scrolling downwards, as if it was part of the "regular document flow". That's why I suggested position: fixed, but I recommend increasing z-index too (for correctness, and avoid potential problems with overflow)

lpil commented 4 months ago

OK! Could you make a PR please? Thank you