Freecodecamp: [beta] Clicking challenges links in the map page...

[marvelousdesign]

Issue Description

So when you scroll anywhere in the map besides the top, and click a link to the challenges. The position of the challenges page are focus on bottom rather than the top, so part of the content is covered when you first go to the challenges.
Chrome is just barely on the edge of the content.
The positions also depends if you have a bookmark bar/addon bar/status bar, etc.
Not sure if it's something to do with bootstrap..

Browser Information

• Browser Name, Version: Firefox 51.0 & Chrome 56.0.2924.76
• Operating System: OSX 9.5

Screenshot (Firefox)

Screenshot (Chrome)

[ajain17]

I can confirm this is a valid issue. Needs to be fixed.

[no-stack-dub-sack]

@marvellousdesign Interesting, I'm unable to reproduce this on Chrome / OSX 10.11.6

@freeCodeCamp/moderators can anyone else confirm this as well?

[raisedadead]

@marvellousdesign thanks.

And I must admit sheepishly that this is a known issue from the last time we pushed react.
I can't find the old issue no, or even if there was one earlier reported.

But here is some insight:

1. The pages that use our react infrastructure are generated and rendered on the client side.
2. This means they are within the same container as any react page, and we just simply update the DOM, which renders the new content.
3. This container sadly is currently taking the scroll from the whole page.
4. Hence think of this as a behaviour where you have scrolled somewhere in the page, that would be to some point in the map, and then replace it with the challenge's view.
5. The browser is fooled, and technically this being the same page it doesn't auto scroll.
6. A fix would be to subscribe to the loading finished state and reset the scroll.

You will notice that this wont happen with the static pages.

[QuincyLarson]

@raisedadead thanks for the analysis. Are you able to reproduce this issue? Do you have any ideas how we might go about fixing this?

[raisedadead]

@QuincyLarson yes, I can reproduce the issue, as for the fix, I am unfortunately not the expert. Maybe @BerkeleyTrue , @Bouncey and others are more suited to guide on a fix.

[BerkeleyTrue]

This looks to be a css issue, maybe?

@QuincyLarson We've talk about making the navbar non-sticky. That might fix this issue (if it is indeed a css issue)

[Bouncey]

CSS gets my vote too. Sticky navbars need something like 60px of padding-top on the body to move content from under it.

[texas2010]

yeah, I think navbar non-sticky is good idea.

[QuincyLarson]

A non-sticky navbar would not affect desktop users significantly, and would make the mobile experience much better imho. I'm for trying out a non-sticky navbar.

[nesterone]

I also able to reproduce it, however looks like I didn't got the idea with non-sticky navbar. Is it about moving navbar out of scrollable viewport (content of the challenge) ?