1954144 - td.com - Unnecessary scroll bars displayed on the window of the video

Status: ASSIGNED

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

Description

[Calin Tanase]

Attachment: image.png

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

Steps to reproduce:

1. Go to https://www.td.com/ca/en/about-td/diversity-and-inclusion/black-communities-in-canada?cm_sp=c000-20-2404
2. Click on the first video.
3. Observe the window.

Expected Behavior:
Displayed without any scroll bars.

Actual Behavior:
Unnecessary scroll bars displayed.

Notes:

1. Screenshot attached
2. Reproducible regardless of the ETP status
3. Reproducible on Firefox Release as well
4. Not reproducible on Chrome
5. Issue found during WebCompat team [Top100] websites testing

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 2

[Daniel Holbert [:dholbert]]

The site here is specifically styling the element as overflow:scroll (asking for scrollbars, whether they're needed or not), so that's why we show scrollbars.

Then the site shrinks those scrollbars and makes them have a white "track" by using various ::-webkit-scrollbar styles (which Firefox doesn't recognize), which happen to make the scrollbar visually-disappear in Chrome unless there's some scrollable overflow (e.g. if you make your viewport very short). But if I disable all the ::-webkit-scrollbar styles in Chrome, then I see the same scrollbar in Chrome that Firefox shows.

Here's the relevant CSS

.overlay-video-modal .cmp-dialog__details {
    overflow: scroll
}

...and here's one of the various ::-webkit-scrollbar style rules that I can manually disable to make Chrome match our rendering:

.cmp-dialog ::-webkit-scrollbar {
    width: 5px;
    position: absolute;
}
.cmp-dialog ::-webkit-scrollbar-thumb, .cmp-dialog ::-webkit-scrollbar-thumb:hover {
    background: #616161;
    border-radius: 5px;
}
.cmp-dialog ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 5px;
}

https://www.td.com/etc.clientlibs/tdsite/clientlibs/clientlib-emerald.lc-1719537548927-lc.min.css

I think for now we've decided against trying to support ::-webkit-scrollbar styles (bug 1432935 is WONTFIX), but let's associate it with that bug and the associated webcompat knowledge-base issue. We've already got this as needs-sitepatch -- one possible sitepatch would be:

.overlay-video-modal .cmp-dialog__details {
  scrollbar-width: thin;
  scrollbar-color: #616161 #fff; 
}

However, I'm not sure it's really worth it... Note that these scrollbars already hide automatically for us on any platform where we show overlay scrollbars, which is the default on the latest version of each OS that we support I think.

Comment 3

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1954144 - add a CSS intervention for td.com to improve scrollbar rendering on video pop-ups; r?denschub

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d286c012692c
add a CSS intervention for td.com to improve scrollbar rendering on video pop-ups; r=denschub,webcompat-reviewers

Comment 5

[Narcis Beleuzu [:NarcisB]]

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