33

When I scroll horizontally through a single line code block on my MacBook, it looks like this:

Single-line code block

This makes it very difficult to see what the code is, especially at the places where the scroll bar covers the code block. Is this a bug or [status-bydesign]? Or is it something that can't be fixed because that's just how the browser works?

Anyway, here is a code block for you to try it on.

a    b    c    d    e    f    g    h    i    j    k    l     m    n     o    pqrstuv     w x y z

Look at how hard it is to see what am I writing! Every time I scroll, I need to wait for the scroll bars to go away to see the code!

With my limited CSS and HTML knowledge, I think this is impossible to fix. Are there other workarounds for this? Edit the post?

14
  • 1
    Your example is too short for scrolling! Jan 2, 2016 at 2:01
  • 5
    Cross meta duplicate meta.stackexchange.com/q/271960/213575
    – Braiam
    Jan 2, 2016 at 2:27
  • 1
    I believe it's very much possible to fix, see stackoverflow.com/a/14150577/1849664
    – Undo Mod
    Jan 2, 2016 at 4:13
  • 3
    Making the code block narrow enough that it doesn't need to scroll is helpful, but there are a large number of screen widths. OTOH, the app on iOS handles this more cleanly (almost no overlap of grey bar and material). In Chrome on iOS, the material is wrapped automatically (no scroll bar). I see the problem on Mac OS X 10.10 and 10.11 with Firefox (38.x ESR and 43.0.3). Jan 2, 2016 at 5:26
  • @JonathanLeffler: chrome on osx too. Jan 2, 2016 at 14:21
  • 7
    Setting "show Scrollbars" to "Always" in the OS-X settings will solve the issue (see e.g. osxdaily.com/2011/08/03/show-scroll-bars-mac-os-x-lion). Not sure what the web-site can do to solve this for people with another setting.
    – fishinear
    Jan 2, 2016 at 14:54
  • 1
    It gets better if you scroll with your cursor on the upper-half of the line.
    – natario
    Jan 2, 2016 at 19:23
  • 4
    One of the many reasons why an 80-column width limit remains a good idea to this day.
    – zwol
    Jan 2, 2016 at 19:27
  • @zwol I mean, not really. It's just a bad implementation of a scrollbar - which would also happen in non-coding contexts.
    – Rob Mod
    Jan 3, 2016 at 23:22
  • 1
    I don't have that problem. Running Mac OS X 10.11.1, Firefox 43.0.3. But mine is also not a MacBook, it's a Mac mini.
    – CaptJak
    Jan 4, 2016 at 2:14
  • 3
    Isn't this an Apple bug rather than a SO/SE bug? I mean, it's by-design for Mac OS X, so it's just the typical trade-off you get with Apple products. Everything is beautiful, but not always the most usable. So if you don't like it going to the OS and per fishinears comment you disable the overlay scrollbars would seem the proper solution. Jan 4, 2016 at 2:18
  • This is a problem with the browser, not the OS (or it may be some interaction between the two). Which browser are you using? Your example looks fine on Safari 9.0.1 on Mac OS X 10.11.1. These are the latest versions of OS X and its built in browser, so they are what I would assume you mean by "on OS X". Jan 4, 2016 at 3:00
  • Mine is blue... Jan 4, 2016 at 6:06
  • I'm not seeing this problem on my MacBook Air Chrome.
    – Alex K
    Jan 4, 2016 at 13:34

1 Answer 1

6

If you have a user stylesheet manipulator of some sort, upping the line height a bit for code blocks might help without having to implement a custom scrollbar:

#code {
    line-height: 35px;
}

Looks like this:

Improved single-line code block

With the expanded scrollbar:

Expanded scrollbar

Of course, if you just paste that into a stylesheet, it'll affect multi-line code blocks as well. That's a relatively easy fix if you're willing to mess around with userscripts, which I am.

A little less visually appealing, maybe, but it does the trick.

2
  • I haven't looked, but can you not add padding on the bottom?
    – user4639281
    Jan 4, 2016 at 6:06
  • 2
    Would adding this style sheet have any adverse effects in other user environments? If not, then Stack Overflow could unilaterally override the "helpful" OS X default. (I agree that this should properly be fixed by Apple; but in the meantime, having a viable server-side workaround would be valuable.)
    – tripleee
    Jan 4, 2016 at 6:35

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