1690158 - Create webkit-scrollbar intervention for slack

Status: RESOLVED FIXED

(Web Compatibility :: Interventions, task)

Description

[Karl Dubost💡 :karlcow]

1. Configure your OS to always show the scrollbar
2. Access an instance of slack on Firefox Nightly 87
3. Click on Add Emoji

Expected:
One scrollbar for the emoji

Actual:
Show multiple scrollbars on firefox.

They use

.supports_custom_scrollbar .p-emoji_picker__list_scroller::-webkit-scrollbar {
position: absolute;
-webkit-appearance: none;
width: 8px;
}

Comment 1

[Ksenia Berezina [:ksenia]]

One thing to note here that the second (inner) scrollbar becomes visible in Chrome on hover. So maybe we could set scrollbar-width: none; by default and scrollbar-width:thin; on hover to make it look similar.

Comment 2

[Oana Arbuzov [:oanaarbuzov]]

Attachment: ultipleScrollBars.png