An Annoying Bug
Posted April 21, 2019
When using html <pre> tags, a horizontal scrollbar is created if the content is wider than the containing element. This is because the purpose of the <pre> tag is to preserve spaces and line breaks in preformatted text. In other words, text inside <pre> tags will not wrap to the next line. This same behavior can be obtained by including overflow-x: auto in the CSS for an element. This example from RailsGuides illustrates the behavior:
form_tag(:controller => "people", :action => "search", :method => "get", :class => "nifty_form")
# => '<form accept-charset="UTF-8" action="/people/search?method=get&class=nifty_form" method="post">'
This behavior makes providing multi-line code snippets in a blog post much easier. However, Chrome has a bug that can turn this convenience into a major annoyance.
The scrollbar is initially hidden:
and it appears when you start scrolling:
all of which is fine unless your cursor touches the scrollbar while it’s visible. Then this happens:
and it doesn’t go away. The second line of the snippet is obscured by the scrollbar and the only way to read that content is to refresh the page then try to scroll again without touching the scrollbar with your cursor. This can be tricky to do if the code snippet is short.
Finding a solution to this problem took a while. Googling the issue was frustrating because all I could find were threads about using CSS to keep the scrollbar visible or invisible. This was fine (sort of) for my own blog post, but I was having the issue on other websites (like RailsGuides). Furthermore, the problem didn’t occur if I used Firefox instead: there the scrollbar appears during scrolling but disappears shortly after you stop scrolling. This wasn’t a CSS issue: it was a Chrome issue (or, more specifically, a Chrome for OSX issue).
Nonetheless, it drove me nuts enough that I initially “fixed” it for my blog posts by adding the following to the SASS for the <pre> tag:
&::-webkit-scrollbar {
display: none;
}
This also solved another problem I was having: if I scrolled up the page on my blog post with the scrollbar “stuck on”, it stayed visible on top of my pinned header. (A problem which, annoyingly, I cannot recreate to get a screenshot.) But, of course, with the change above the scrollbar is never visible inside my multiline code snippets, which is almost as annoying as the “stuck on” situation. So the search continued.
It took me quite a while to find the right combination of Google terms but, once I did, I learned that the solution (which is really a workaround) is annoyingly simple. Thanks to this stack overflow post, I learned that Mac’s System Preferences, under the ‘General’ tab, include the following options:
Switching from ‘Automatically based on mouse or trackpad’ to ‘When scrolling’ solved the whole problem. Now the scrollbar behavior for code snippets is the same in Chrome as in Firefox: it appears when scrolling and stays visible only briefly. I haven’t yet discovered what other — no doubt less desirable — behaviors this setting causes.
Also see my Flatiron student blog entries