RocketChat / Rocket.Chat

The communications platform that puts data protection first.

Home Page:https://rocket.chat/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scrollbars are impossible to see

mespotine opened this issue · comments

Hey,

I've been using Rocket.Chat for some time now in the browser and there's one thing that bugs me for ages: scrollbars are impossible to see and therefore to click.
The scrollbar of the channel-list is very hard to find. I have to click dozens of times until it even appears and when it finally appears, I almost can't see it since it's a dark scrollbar against a dark background. I have to make my screen as bright as possible to notice, where it currently is.

It's also difficult to use the scrollbar on the message-view. I simply can't find it and click wildly around, until I finally found it and can scroll around.

And while clicking to make it appear/to find it, I select dozens of things I don't wanted to select. I just wanted to use the scrollbar.

Would it be possible to make scrollbars in the browser-version of Rocket.Chat more visible? Like surrounding them with a brighter rectangle(scrollbars in general) and even make it appear at all when hovering the mouse over its area(in the channel-list)?
This would be awesome and a huge improvement ux-wise. It would also be an improvement on the accessibility-side of things, since users with difficulty to see have probably no chance to even notice the scrollbars as of now.

Used on Opera, Windows 7,

Description:

Steps to reproduce:

Expected behavior:

Actual behavior:

Server Setup Information:

  • Version of Rocket.Chat Server:
  • Operating System:
  • Deployment Method:
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version:
  • MongoDB Version:

Client Setup Information

  • Desktop App or Browser Version:
  • Operating System:

Additional context

Relevant logs:

Additional note: I use a ThinkPad that has no trackpad, so I need to click and drag using the mouse instead of gestures.

For Chrome engine based browsers we use this to workaround the dark scroll bar issue. Firefox is ok without, at least.

/admin/settings/Layout -> Custom CSS

div.rc-scrollbars-thumb.rc-scrollbars-thumb-v {
  background-color: #797f98 !important;
}

Refresh the browser window to see the difference.

I can work on this issue.

Hi there, thanks for the contribution! 🚀 💯

Sorry, this error does not happen on the latest and it was fixed here: #32341

Rocket.Chat provides support for, at least, 3 months for each release and 6 months for the latest releases of each major version

I would suggest you update your Rocket.Chat version to the latest stable version, which you can find in Releases Page and, check it HERE the table with versions and End of Life dates.


Questions? Help needed? Feature Requests?

  • Join our Open Server in the #support channel and feel free to raise a question
  • Join our Community Forum and search/create a post there

@dougfabris Hi! Sorry, I made a new test just now. Actually the issue still happens with Chrome/Chromium on RC 6.7.2.

I removed all our custom CSS and did shift-reload just in case. Also complete wipeout of cache. The scroll bar on Chromium is completely black by default. (The same in both light and dark mode.)

If the results differ, as a wild guess I think it might depend on the OS and choice of monitor, if Chrome engine does its color correction thing by the tone map of the monitor. But I haven't tested for it.

Hey @Gummikavalier
I'm sorry, maybe I wasn't clear enough. This change is already on our latest development version.
It will be released on 6.9.0

@dougfabris Sorry, my bad! My eyes were seeing completely different dates there so I thought it was old. 😵