Rocket.chat: Scroll of sidebar rooms-list div has white background on Mozilla Firefox

[mikaelmello]

Description:

Sidebar div rooms-list is misaligned with header and footer on Mozilla Firefox 58.0 (64-bit) on https://open.rocket.chat/. Picture: https://imgur.com/a/WzxOa

This issue happens only in Firefox in Linux Mint 18, Chrome looks fine.

Update: It happens on both open chat and my local server, still only on Firefox (haven't test anything else than Chrome).

Screenshot shows a 1280x720 resolution, bug still happens at 1080p.

Update: White background of scrolls on Mozilla Firefox causes the dark theme to seem buggy.

Server Setup Information:

• Version of Rocket.Chat Server: 0.63.0-develop
• Operating System: Linux Mint 18
• Deployment Method(snap/docker/tar/etc): Quick start for code developers
• Number of Running Instances: 1
• DB Replicaset Oplog: I don't think it is relevant for this bug
• Node Version: 8.9.4 - x64
• mongoDB Version: shell 2.6.10

Steps to Reproduce:

Simply open the open Rocket.Chat on Firefox.

Expected behavior:

rooms-list to be vertically aligned with header and footers of sidebar.

Actual behavior:

rooms-list has slightly less width.

Relevant logs:

None yet.

[mikaelmello]

I've updated with more info

[k0nsl]

Yes, I can confirm this on my own instance which runs 0.62,1 but I just never got around to reporting it. Thanks for doing it, @MikaelMello :+1:

[mikaelmello]

This is caused by the rule overflow-y: scroll on packages/rocketchat-theme/client/imports/components/sidebar/rooms-list.css, when the scroll is activated, it has an white background making it seem like the div was misaligned.

Setting overflow-y: auto fixes the issue by making it look normal while a scroll is not needed, and when it is, we have a dark vertical bar instead of just white void, this way it looks better when there is not a scroll involved.

The real solution would be to customize the style of the scroll for Mozilla, which is far from a trivial task in my opinion.

[theorenck]

Thanks to take the time to report it tu us @MikaelMello.

[balcsida]

Fun fact: Scrollbar styling with CSS only works in WebKit based browsers
https://caniuse.com/#search=scrollbar

[theorenck]

Hi @mikaelmello we will attend this issue on our planed react rewrite.

[MartinSchoeler]

Fixed by https://github.com/RocketChat/Rocket.Chat/pull/10367