Scrollbars are not hidden in Firefox on Windows

[skyfrk]

Describe the bug

In Firefox some scrollbars are rendered that probably should not be rendered (see screenshots below).

Screenshots

Firefox

Chrome

Your Environment

• Version used: v1.1.12
• Environment name and version: Firefox 104.0.2 (64-bit)
• Operating System and version (desktop or mobile): Windows 10

[sserrata]

I am not able to reproduce on same version of Firefox. Any chance your scroll bars are set to always be visible?

https://support.mozilla.org/en-US/questions/979836#:~:text=You%20can%20make%20the%20scroll,Scroll%20Bar%20%3E%20Choose%20%22Always%22

[skyfrk]

I did not find any setting on my system (Windows, not MacOS like in the link you posted) that forces scrollbars to always appear.

Upgrading to the latest Firefox version (105.0) also did not change anything.

@FelixBurkhardAIT I think you were also able to reproduce this issue, correct? Maybe you can share your setup.

Edit:

https://connect.mozilla.org/t5/discussions/scrollbars-disappear-in-firefox-100/td-p/5433

I have the setting "Automatically hide scroll bars in Windows" enabled. Changing it doesn't affect the outcome though.

[sserrata]

Hi @skyfrk, I tested on a Mac so it would it appear to be OS-specific. Have you ruled out any possible accessibility setting in Windows?

(I'll try to spin up a Windows VM today to try to reproduce)

[FelixBurkhardAIT]

The problem I experience is a bit different than described. Firefox shows scrollbars for scrollable elements that occlude parts of the content: While hovering the cursor over it: When removing the cursor the scrollbar slowly fades away from this: until the scrollbar is complete removed: I am using Firefox 105.0 (64-bit) on Windows 11 Enterprise Build 22000.978

[sserrata]

Any updates to share? I am hoping to have time to reproduce this week.

[skyfrk]

@sserrata I am still experiencing the same issues with the latest version of https://docusaurus-openapi.tryingpan.dev/petstore/place-order

OS:

Edition	Windows 10 Pro
Version	21H2
OS build	19044.2006

Firefox v105.0.2 (64-bit)

[sserrata]

Since it doesn't occur in Firefox running on a Mac, I strongly suspect it's a Windows-specific setting/issue. Are you able to consistency reproduce on other Windows 10 systems or even Windows 11?

[skyfrk]

@FelixBurkhardAIT could and I just could do so as well on my other Windows 10 desktop PC. I also suspect that this is Windows specific.

[sserrata]

@skyfrk I was finally able to reproduce something similar on Windows 11 but it's not identical to the issue you reported:

https://user-images.githubusercontent.com/9343811/195428553-c48796c9-e7b8-4e1e-80ef-3185273aad7c.mov

Basically, what I am seeing is that the scrollbar completely covers the content while scrolling. Produced this behavior on Firefox on Windows 11 and Mac.

[benlei]

@sserrata I'm observing the same issue on Windows using Firefox.

At the cost of sounding potentially dumb, would it potentially make sense to add scrollbar-width: none around https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/blob/1f6bfe79976c07f9b204bd584ea72e8705e4af9e/packages/docusaurus-theme-openapi-docs/src/theme/SchemaTabs/styles.module.css#L49?

Maybe relevant bugzilla thread: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109#c12

[sserrata]

Hi @benlei, thanks for the suggestion. It's been tough to reproduce this particular issue, hence why we haven't been able to address it yet. Can you try applying scrollbar-width: none in inspect mode to see if it solves the issue?

[benlei]

Hi @benlei, thanks for the suggestion. It's been tough to reproduce this particular issue, hence why we haven't been able to address it yet. Can you try applying scrollbar-width: none in inspect mode to see if it solves the issue?

@sserrata I was able to apply that to an element (body) in my developer console and it hid it, yes. I'm not sure if there are other things to test around it, though. There doesn't seem to be drag scrolling with or without it on Desktop. I was able to press the < and > icons to see the rest of the body responses (place an order for a pet).

[benlei]

Here are some pictures:

Adding in the scrollbar-width:none property to response:

[sserrata]

@blindaa121 any thoughts on using scrollbar-width: none?

[blindaa121]

@sserrata I think scrollbar-width: none works fine 👍

[benlei]

@sserrata Any update for this?

[IanVS]

I can reproduce this on a mac in firefox, and scrollbar-width: none seems to do the trick.

[sserrata]

This should be addressed in v2.0.0-beta.1 but would appreciate if someone could help test. Thanks!

[benlei]

@sserrata It is not fixed in the preview (https://docusaurus-openapi-36b86--pr439-0r874qft.web.app/petstore/place-order/)

---

Once again if I use the browser dev console to add in scrollbar-width: none it resolves the issue:

[benlei]

@sserrata Any update for this?

[Gijsdeman]

I am experiencing an issue which I think is related to this one. In Firefox for ubuntu, when you scroll in the language tabs, you can scroll in the codeBlockTitle, but you are also able to scroll in codeBlockLines, which causes different behaviour depending what container you are focused on, as well as a double scroll bar (which I can sadly not capture in my screenshots). However, I do not experience this effect on any of the other components, nor are any other scrollbars visible which should not be.

This is the normal setting, where you are at the top of the code and the title is visible.

Then, you can scroll while focused on codeBlockTitle, making the title disappear.

But you can also scroll while focused on codeBlockLines, which has the (intended?) effect of actually scrolling through the code.

[matteocontrini]

This also occurs on Firefox on Mac, I think when an external mouse is connected. Still present on v3.0.0 beta.

[sserrata]

@blindaa121, any idea if has been addressed or if it's still an issue?

[blindaa121]

@sserrata Ah still looks reproducible on my end, I'll put up the PR for the fix. 👍

[blindaa121]

Issue has been resolved in https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/pull/785