24

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:


A horizontal scrollbar is visible in a code box that contains one line of code, blocking most of the contents from view


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
  • 4
    Having the scroll bars appear over the code when scrolling is plain annoying. You should change your settings, which will make the scroll bars always appear below the text. See here: meta.stackoverflow.com/a/326476/6083675. – Laurel Dec 28 '18 at 20:35
  • 1
    Cool. I have 3 options: "Automatically based on mouse or trackpad", "When scrolling", and "Always". The 1st and 2nd options behave similarly, and I've had the 1st option enabled until now. "Always" shows scrollbars below the content, and works around this bug just fine. Thanks! – David Winiecki Dec 28 '18 at 20:40
  • Looks like this is a duplicate of meta.stackoverflow.com/questions/326473/… – David Winiecki Dec 28 '18 at 22:46
  • FYI there's already a padding 'hack' for IE7 padding-bottom: 20px !ie7; on the pre tag so why not just fix this? – Dan Feb 6 at 12:00
  • Marking this "support" since it appears to be caused by a toxic cocktail of Mac and Chrome - while the giants fight it out, the best we can do is work around it. – Shog9 Feb 20 at 3:46
  • jsejcksn reported below that this issue has been reported for Chrome: bugs.chromium.org/p/chromium/issues/detail?id=914844 – David Winiecki Feb 21 at 20:06
  • There’s now a larger padding: Has the padding on code blocks been increased?. – Sebastian Simon Mar 14 at 6:24
13

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:

  • 4
    This is a good workaround and I'm fine with it, but I still think there is a bug here that needs fixing. – David Winiecki Dec 28 '18 at 22:56
  • @DavidWiniecki IMHO it is a bug, but a bug with the operating system. The only way to fix it here is to do a conditional by checking the user agent string and that would be hacky. – Kodos Johnson Jan 9 at 20:25
  • 1
    I don't think anyone has verified the culprit (OS, Chrome, Stack). – David Winiecki Jan 10 at 23:39
  • Understanding code with overlapped scrollbar, it's annoying and irritating. Even I was about to same feature request/bug.I feel its highly required thing on priority. – Sakshi Feb 8 at 5:26
  • @DavidWiniecki : It's definitely not just StackOverflow; you can see it on other sites like Medium and here: atlassian.com/blog/git/… – chharvey Feb 13 at 19:14
  • @chharvey I think that points toward Chrome. Until someone debugs it and verifies the mechanism behind the behavior I don't think we'll know for sure. Even so, a bug report should probably be filed with Chrome as well. (As far as I understand, the existence of these conversations on meta serve as a bug report for Stack Exchange.) I haven't submitted a bug report with Chrome, I don't intend to right now, and I haven't heard that anyone else has submitted one. – David Winiecki Feb 13 at 22:16
  • (So someone should file a bug report with Chrome, but I'm not volunteering right now.) – David Winiecki Feb 13 at 22:17
  • @DavidWiniecki You're right, it must be Chrome. I tried it in Firefox and Safari and had no problems. (Side note: Safari interprets word-wrap: break-word differently, so anyone testing my link above in Safari should uncheck that css property in the inspector.) – chharvey Feb 14 at 1:59
  • 2
    FYI: This issue has been reported: bugs.chromium.org/p/chromium/issues/detail?id=914844 – jsejcksn Feb 16 at 19:29
  • this started happening after chrome 70 and is not fixed in Canary. – FlavorScape Mar 12 at 2:49
2

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

  • There are easily a dozen different reports of this across various meta sites, @davy. Many are near- or exact-duplicates and have been closed; the rest need some update to indicate that the problem has been addressed. A short note and a link to details should suffice for that. – Shog9 Mar 14 at 20:46
1

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 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 迷你滚动条(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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .