44

This appears to be an issue exclusively on Chrome for Mac OS X, but for code blocks that contain a single line of code larger than the viewport, when I try to scroll them and the large scrollbar appears, when I mouse away, the bar does not disappear.

I cannot reproduce the problem in Firefox; it uses the same system scrollbars, but they do disappear properly.

Here's an example:

screenshot of scrollbar issue

This is a usability issue because it renders the code block unreadable until a page refresh.

8
  • 2
    Possible duplicate of The scroll bar on the code snippet makes the code unreadable Commented Dec 28, 2018 at 21:39
  • 5
    @IlmariKaronen lmao are you serious? I asked this over 2 years ago Commented Dec 28, 2018 at 21:54
  • 1
    I see now that my question is a duplicate of this question, but I included additional details: meta.stackexchange.com/q/321136/238512 Commented Dec 28, 2018 at 22:57
  • @DavidWiniecki the particular details of the actions leading up to the behavior are certainly more specific in your question, but the generally annoying behavior itself and the solution to it are the same. Commented Dec 28, 2018 at 23:03
  • To be clear, I'm just trying to provide more information, hoping it helps someone diagnose and fix the bug. Commented Dec 28, 2018 at 23:45
  • 1
    Now also reported on Meta.SE: Workaround for horizontal scroll bar obscuring single line code markdowns. Commented Feb 17, 2019 at 14:02
  • Marking this "support" since it's clearly a browser bug triggered by a specific, weird, OS option - neither specific to Stack Overflow nor something we can readily fix. Fortunately, there's a work-around.
    – Shog9
    Commented Feb 20, 2019 at 3:47
  • 2
    Marking this as [status-completed], since [it has now been worked around by adding additional padding to code blocks.
    – Cody Gray Mod
    Commented Mar 14, 2019 at 23:05

3 Answers 3

24

I'm using Chrome Version 49.0.2623.112 (64-bit) on Mac, but I don't have this issue.

On the other hand, I may have a solution.

The behavior of scroll bars can be changed in System Preferences. (Look in General or search for scroll bar behavior.)

Given your description, it seems likely that you're using the "show only when scrolling" setting. I don't like this setting; although my scroll bars disappear after a second of not scrolling, the bar is right on top of the line of text when it is visible. Well, that is if I actually know things can scroll without the visual indication in the first place...

That's why I use one of the other two options (there are no apparent differences between them for me). This way, the scroll bar will appear under the line of text, not over it:

like this.

Of course, this will change this setting everywhere, but it's worth considering.

1
  • Thanks for the recommendation, I think I'll probably keep this setting. Commented Jun 19, 2016 at 23:07
4

I posted my solution in another question but will post the same answer here too,


EDIT:

@Patrick Roberts suggested that you could just override the default CSS with stylish instead of using userscripts, which I agree that is a better solution, so you don't have to run potentially malicious javascript.

Here are a couple of the scrollbars I've found:

This one works well if you like windows 10 scrollbars. You can customize it make it a little different. I have no problems with this one. https://userstyles.org/styles/166079/windows-10-dark-scrollbar

The following actually the same as the userscript below. Stylish actually lets you install as a userscript if you want. It's partially broken for me though. I had to edit the CSS to be ::-webkit-scrollbar... instead of html::-webkit-scrollbar.... It works well otherwise. https://userstyles.org/styles/127819/dark-minimalistic-scrollbar

This one doesn't seem to work for horizontal scrollbars on Chrome. https://userstyles.org/styles/167001/custom-scrollbars-all-sites


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.

5
  • 1
    Seems like you could forego the use of JavaScript since all it's doing is injecting a stylesheet into the DOM. Stylish would be a good extension for doing that without resorting to a userscript. Commented Mar 5, 2019 at 23:56
  • Hmm didn't think of that for some reason. That would be preferable so you don't have to run potentially malicious code. Thanks for the suggestion. Have you found one that just changes the scrollbar and not a whole theme? Commented Mar 5, 2019 at 23:58
  • 1
    The nice thing about stylish is you can add your own custom css and write your own url filter to apply to all sites, you don't have to use a pre-made theme for a specific site. Commented Mar 6, 2019 at 0:06
  • Oh okay. I see that you are the OP and you posted this question in 2016. What solution have you been using since then? Commented Mar 6, 2019 at 0:08
  • 1
    I made the system-wide change in the other answer. I agree it's dumb to hide a scrollbar when a UI element should always visibly indicate that it's scrollable. I still think you should leave this answer though, and I did upvote it. Some people may prefer this and only want the change on their browser or even just on Stack Exchange. Commented Mar 6, 2019 at 0:10
0

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

5
  • In case you're confused about the downvotes, this is not an answer. The respective question has also already been linked by Xufox. Commented Mar 14, 2019 at 16:12
  • @PatrickRoberts Understood, just wanted to alert you of why we addressed it the way we did.
    – Ted Goas Staff
    Commented Mar 14, 2019 at 16:37
  • 5
    @PatrickRoberts: A dev telling you that they can't fix it but there's a workaround being put into production doesn't qualify as an answer? I'm confused.
    – Makoto
    Commented Mar 14, 2019 at 16:51
  • @Makoto Maybe I'm in disagreement with you about what qualifies as an attempted answer, but this is a valid reason to downvote. There is no effort to make the answer here self-sufficient without the link. I have removed the flag as it seems the consensus on the meta post I linked is that this is semantically an attempt at an answer, but I still feel this is a misuse of an answer, and is at best a comment. Commented Mar 14, 2019 at 17:06
  • 1
    Maybe it should've been closed as a dupe to that question instead. I see your point and largely agree with it @PatrickRoberts.
    – Makoto
    Commented Mar 14, 2019 at 17:07

You must log in to answer this question.

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