[Question] Why there is that gradient background at the bottom of the sidebar?

[ghost]

I'm sorry, but it looks so ugly...

• Safari latest version (I think it's 9) (OS X El Capitan)
• Scrollbars are shown when scrolled.
• https://nodejs.org/dist/latest-v5.x/docs/api/
• On Google Chrome (Windows 7) the gradient is on top of the scrollbars.

[leo]

I don't like it either, but it probably indicates that there are other API categories below the visible ones.

[r-52]

@dkfiresky nodejs/node#4748 describes your problem and a fix for it. If I use Safari with El Cap and the latest docs I can't see a gradient.
The commit landed in the 4.x staging, but I believe there was no release between the landing of the commit and now.
/cc @silverwind

[silverwind]

The bugged gradient on Safari was fixed in nodejs/node#4748 and the fix has been released with the 5.6.0 docs a few hours ago, so you should see it working as intended now:

The purpose is simply to indicate the scrollability of the sidebar, which might not be obvious because scrollbars are hidden.

[silverwind]

On Google Chrome (Windows 7) the gradient is on top of the scrollbars.

I wasn't seeing this, could you check if it's still an issue right now?

[stevemao]

@silverwind I confirm it is on https://nodejs.org/dist/latest-v4.x/docs/api/
But not on https://nodejs.org/dist/latest-v5.x/docs/api/ anymore.
I'm on Windows 7 Chrome, oh it is on bottom not top.

[stevemao]

[silverwind]

@stevemao that's because the backport of nodejs/node#4748 hasn't been released yet. It's a bit unfortunate, but we have to wait for the next LTS release for the 4.x docs.

[ghost]

Why simply showing scrollbars is not enough for indication of more content in the sidebar? It looks like overkill for me. Also the text color almost matches the gradient color (as posted in original screenshot) which makes text unreadable.

[silverwind]

Why simply showing scrollbars is not enough for indication of more content in the sidebar?

I was going for a more "modern" style, and I think it looks cleaner without a scrollbar.

Also the text color almost matches the gradient color (as posted in original screenshot) which makes text unreadable.

The rendering in your original screenshot was a bug. Chrome, Firefox and IE didn't show it, and I learned my lesson for not testing Safari :)

[ghost]

@silverwind

I was going for a more "modern" style, and I think it looks cleaner without a scrollbar.

Now we got another bug. If you want to scroll on the sidebar only, it scrolls all content and after content is scrolled top till the end, sidebar starts scrolling. Same happening when you scroll bottom.
Here is a video:

As shown on the video, I'm scrolling on the sidebar side.

[silverwind]

@dkfiresky that behaviour is very browser-specific (Chromes does bubble the scroll event when the limit is reached, Firefox does not) from what I've tested, but I assume improvements can be made to have make it behave more like http://devdocs.io/node/ for example.

[silverwind]

I'm working on the scrolling issues and other misc things on the API docs's CSS.

[ghost]

@silverwind

http://devdocs.io/node/

They got nice scrolling, and I think they somehow prevent scrolling on areas which are not under the mouse cursor.

[silverwind]

@dkfiresky yes, I already figured out how they do it, took me some time though 😉

See nodejs/node#5198 for my propsed changes.

[ghost]

Well done, @silverwind 👍

I will close this issue as soon as your pull request will be merged.

[stevemao]

I really think doc/api_assets should be managed here in this repo. I know this was brought a long time ago and requires build scripts changes so yeah :)

[silverwind]

Yeah that'd be my preference as well for faster propagation of stuff like this. On the other hand, it's kind of nice that each API release has its own standalone package of docs.

[ghost]

I close this issue now, as my questions were resolved. Thanks everyone for participation.