1560071 - scroll bar incorrectly appears in top section of website, preventing me from using it

Status: RESOLVED FIXED

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

Description

[Will]

Attachment: teamcocoscroll.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

When I go to https://teamcoco.com/ there is a horizontal scroll bar that is covering the top sections of the website. I think this is because my system display scaling is set to 175%. If I use Firefox's page zoom to zoom out, the scroll bar goes away (I can keep zooming out more and more and it remains useable, but if I zoom in at all, the scroll bar remains there for 110%, 120%, 133% etc. and I cannot navigate the site)

Actual results:

I went to the site in both Chrome and the UWP based Edge (not the new Chromium based Edge) and there is no issue, so it has to be an issue with Firefox. See attached screenshot (I added the red arrows)

Comment 1

[Hani Yacoub, Desktop QA]

The issue is reproducible more visible on Windows 10 x64 and Ubuntu 18.04 and less visible on Mac OS X 10.14 only when reducing the size of the window on Firefox Nightly 69, Firefox 68.0b12 and on Firefox 67.0.4.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

The page has these CSS styles:

            .css-bdnz85::-webkit-scrollbar,[data-css-bdnz85]::-webkit-scrollbar {
                display: none;
                opacity: 0;
            }

            .css-bdnz85::-webkit-scrollbar-thumb,[data-css-bdnz85]::-webkit-scrollbar-thumb {
                display: none;
                opacity: 0;
            }

which hide the scrollbar in Chrome. Emilio, do you know if there is a Firefox equivalent to this? If so we can probably move this to Evangelism and request the site to use it.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

.css-bdnz85 { scrollbar-width: none } is the standard version of that.

Comment 4

[Kartikaya Gupta (email:[e-mail])]

Thanks!

Moving bug to webcompat for reaching out to site owners and requesting they use the CSS from comment 3 instead.

Comment 5

[Mike Taylor [:miketaylr]]

Added to list of candidates for a site patch, in conjunction with outreach: https://github.com/mozilla/webcompat-team-okrs/issues/89

Comment 6

[Oana Arbuzov [:oanaarbuzov]]

The layout has changed and the scroll bar is no longer displayed on top bar menu while resizing the browser window.
https://prnt.sc/245p59x
https://prnt.sc/245pdyu

Tested with:
Browser / Version: Firefox Nightly 103.0a1 (2022-06-22)
Operating System: Windows 10 Pro

Will can you still reproduce it?

Comment 7

[Will]

I can no longer repro but I think this is just because the website is completely different now. If you want to test against the original, here's a webarchive link of the layout from back then https://web.archive.org/web/20190502044648/https://teamcoco.com/ (I assume you would have to delete/disable the intervention to repro?)