Cannot dismiss scrollbar in code box, blocks view

Question

This question is a duplicate of One-line codeblock scrollbars won't disappear (but this question can't be marked as a duplicate because that question is on meta.stackoverflow.com, and this question is on meta.stackexchange.com).

I'm seeing a bug on stackoverflow.com. I'm not sure if the culprit is Stack Overflow, Google Chrome, or macOS.

(Below I refer to a "code box". By that I mean some text that begins with 4 spaces when editing a question or answer.)

When I hover over a code box that contains one long line of code, a horizontal scrollbar appears. When I stop hovering over the code box, very frequently (maybe 3 out of 4 times) the scrollbar does not disappear. Clicking elsewhere on the page also does not dismiss the scrollbar. The only way to dismiss it is to refresh the page.

...After experimenting more, it appears to always happen if I enter the box from below, but not always when I enter from above. It seems to be triggered by hovering over the lower half of the box.

Also if I enter from the top and scroll to the right, then until I refresh the page again that scrollbox will behave normally (only show a scrollbar when scrolling, and disappear after). In that case the scrollbar also has a different appearance, being much less tall (maybe a quarter of the height of the code box rather than half as tall).

Further, if I get a box and scrollbar into that functional state and then hover over the lower part of the box for a bit, then sometimes eventually it will break and stay broken until refresh again.

And in any case hovering over the lower part of the box causes the scrollbar to get taller.

Here is a screenshot of the issue:

---

---

Google Chrome 71.0.3578.98 (Official Build) (64-bit)

macOS High Sierra 10.13.6

Here is a code box that repros the issue for me:

fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

Here is another:

foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo

Answer 1

Paraphrasing myself:

If you’re ok with changing things everywhere, the behavior of scroll bars can be changed in System Preferences. (Look in General or search for scroll bar behavior.)

Set it to “always” display and the issue will be fixed. Scroll bars will always be shown below the scrollable content, like so:

Answer 2

Updated answer here:

One-line codeblock scrollbars won't disappear

You can use custom stylesheets instead of custom user scripts to avoid running unnecessary javascript.

---

If you don't want make system-wide changes, you can use userscripts to override the default CSS.

I am using Tampermonkey on Google Chrome.

These two userscripts work pretty well:

https://openuserjs.org/scripts/leyang/Dark_minimalistic_scrollbar

https://greasyfork.org/en/scripts/36332-%E8%BF%B7%E4%BD%A0%E6%BB%9A%E5%8A%A8%E6%9D%A1-mini-scrollbar

Those two make the scrollbar always visible and under the code block.

I just searched "scrollbar" on OpenUserJS or GreasyFork.

It seems like OpenUserJS only has one custom scrollbar. GreasyFork has a couple so look for one that suits you. Or you can modify the code if needed.

Answer 3

We can’t fix this, but we CAN work around it - and now we have. Details here: https://meta.stackoverflow.com/a/381280/734487