Scrolling preformatted text unusable in some browsers

UX
1

On some browsers/platforms, single-line preformatted text that runs off the screen is difficult to use.

On MacOS Chrome, in particular, the instant you hover over the text the horizontal scrollbar obscures the text, and then never goes away again, no matter how long you leave your cursor somewhere else on the screen. It makes it difficult to read or select the text:

33%20AM
Screen Shot 2018-12-26 at 11.51.33 AM.png1436Ă—82 8.17 KB

On Windows Chrome, however, this is not an issue. The scrollbar is always there, even on initial page load, but does not obscure the text:

windows-chrome-discourse-preformat
windows-chrome-discourse-preformat.PNG1076Ă—93 6.31 KB

On MacOS Firefox, the scrollbar does not appear when you hover over the text. The only way to see text that runs off the screen is to select the text and pull your cursor to the right of the screen. Then the scrollbar briefly appears (and obscures the text just as in MacOS Chrome), but goes away very quickly and is generally unusable.

Safari has the same behaviour as Firefox.

I know there are some hacky ways to detect scrollbar width in javascript, but I’m not sure if this is actually a Discourse bug or a browser bug?

2

Why not enter it using single backtick instead which wraps? This is a bit of a self inflicted wound if you ask me.

like this with single back ticks notice that this line will now wrap because I used a single backtick at the start and finish of the line

1 Like
3

I don’t want arbitrary wrapping when I post code, I want it to scroll. It’s precisely what the <pre> tag is for, I only use the single backticks for inline code.

I don’t agree that opting out of using an inadequate alternative to avoid a bug is a self-inflicted wound.

4

This has 0% to do with Discourse, and 100% to do with rendering choices of particular browsers on particular operating systems. You can “fix” it by adding CSS that targets those particular browsers and operating systems, if you want.

2 Likes
5

If you look at this topic over on our instance and try to scroll over the single line of formatted code text, you get this;

41
Screen Shot 2019-01-07 at 13.00.41.png729Ă—61 4.86 KB

I can’t seem to get the scroll bar to close/minimise, which means I can’t read the actual code.

6

This is due to how Mac implements the scroll bar.

Does not happen in Chrome on Windows for example:

image
image.png1206Ă—211 13 KB

@awesomerobot should we ship some custom scrollbar CSS so code blocks are more consistent?

2 Likes
8

For me the scrollbar disappears soon after the pointer is moved away from the code area. To read the overflowing code, you can scroll horizontally, and then move the move the mouse out of the way. In a second or so, the scrollbar disappears.

For context, macOS has three options for scrollbars:

image
image1348Ă—686 104 KB

I tested the link in the OP with the other two options, and “When scrolling” behaves the same way (i.e. scrollbar fades out once mouse is away from the code block) whereas “Always” will display the scrollbar below the one-liner in your linked example:

image
image1636Ă—158 9.4 KB

4 Likes
9

We do not need two topics on this cc @sam

10

Extremely OS and browser specific, but the trivial workaround is above, reprinted here:

Why not enter it using single backtick instead which wraps?

like this with single back ticks notice that this line will now wrap because I used a single backtick at the start and finish of the line

13

Any way the code could auto convert it?

14

You can easily add some padding in a theme component, @awesomerobot or @Johani can suggest something.

Technically we could do a conversion like this in a Markdown plugin, but we would then diverge from spec quite drastically, so I am very uncomfortable making a change like that.

Adding padding though for your site is trivial if you must, or teaching users there is another option.

4 Likes