1945438 - www.tiktok.com - Unneccessary scroll bar overlapping categories

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Calin Tanase]

Environment:
Operating system: Windows 10
Firefox version: Firefox 134/136

Steps to reproduce:

1. Go to https://www.tiktok.com/explore
2. Observe the categories section.

Expected Behavior:
No scroll bar is present below the categories bar.

Actual Behavior:
Scroll bar overlapping the categories.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/146225

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[Alice0775 White]

The site uses non-standard CSS pseudo-element ::-webkit-scrollbar to hide scrollbars.

.css-6503w-DivCategoryList::-webkit-scrollbar {
    display: none;
    width: 0px !important;
    height: 0px !important;
}

Comment 3

[Thomas Wisniewski [:twisniewski]]

This hides the scrollbar on Chrome:

.css-t1qd2d-DivCategoryList::-webkit-scrollbar {
    display: none;
    width: 0px !important;
    height: 0px !important;
}

They seem to have missed having an equivalent scrollbar-width here (though they're using it elsewhere). We can just add this intervention:

.css-t1qd2d-DivCategoryList {
   scrollbar-width: none;
}

Comment 4

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1945438 - add a CSS intervention for tiktok.com to hide extra scrollbars; r?denschub

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6c36c49de04b
add a CSS intervention for tiktok.com to hide extra scrollbars; r=denschub,webcompat-reviewers

Comment 6

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/6c36c49de04b

Comment 7

[Thomas Wisniewski [:twisniewski]]

Hmm. Their CSS classes have already changed, breaking the intervention. I'll update it to be a bit more robust, since the problem still persists.

Comment 8

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1945438 - update our CSS webcompat intervention for TikTok to hide a superfluous scrollbar; r?denschub

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d4615b6160bb
https://hg.mozilla.org/integration/autoland/rev/db052e997218
update our CSS webcompat intervention for TikTok to hide a superfluous scrollbar; r=denschub,webcompat-reviewers

Comment 10

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/db052e997218