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:


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
    Commented Dec 28, 2018 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! Commented Dec 28, 2018 at 20:40
  • Looks like this is a duplicate of meta.stackoverflow.com/questions/326473/… Commented Dec 28, 2018 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
    Commented Feb 6, 2019 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
    Commented Feb 20, 2019 at 3:46
  • jsejcksn reported below that this issue has been reported for Chrome: bugs.chromium.org/p/chromium/issues/detail?id=914844 Commented Feb 21, 2019 at 20:06
  • There’s now a larger padding: Has the padding on code blocks been increased?. Commented Mar 14, 2019 at 6:24

3 Answers 3


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. Commented Dec 28, 2018 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. Commented Jan 9, 2019 at 20:25
  • 1
    I don't think anyone has verified the culprit (OS, Chrome, Stack). Commented Jan 10, 2019 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
    Commented Feb 8, 2019 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
    Commented Feb 13, 2019 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. Commented Feb 13, 2019 at 22:16
  • (So someone should file a bug report with Chrome, but I'm not volunteering right now.) Commented Feb 13, 2019 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
    Commented Feb 14, 2019 at 1:59
  • 2
    FYI: This issue has been reported: bugs.chromium.org/p/chromium/issues/detail?id=914844
    – jsejcksn
    Commented Feb 16, 2019 at 19:29
  • this started happening after chrome 70 and is not fixed in Canary. Commented Mar 12, 2019 at 2:49

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.


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

  • 1
    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
    Commented Mar 14, 2019 at 20:46

You must log in to answer this question.

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