When editing, writing enough to require a scrollbar causes a slight rewrapping of all text

[OddBloke]

Describe the bug

When I write enough to need a scrollbar on the edit view, the content I'm writing gets rewrapped slightly. Not a big deal, but distracting when it happens.

Before:

After:

(There screenshots were created on a fairly narrow window, so that they weren't enormously wide, but the same issue occurs when the window is fullscreen on my 1920px wide screen and there is a gulf of empty space between the text and the scrollbar.)

Steps to reproduce (if necessary)

Steps to reproduce the behavior:

1. Go to the edit view for a post
2. Write a line of text that just doesn't wrap.
3. Write many more lines of text, so a scrollbar appears

Expected behavior

The text area should have been unaffected by the scrollbar appearing.

Browser information

Google Chrome Version 76.0.3809.87 (Official Build) (64-bit) on Ubuntu 19.10

Application configuration

• Single mode or Multi-user mode? Multi-user
• Database? sqlite
• Open registration? no
• Federation enabled? yes

Version or last commit: 0.10

[thebaer]

Thanks for the input, @OddBloke. I think this is default Chrome (and probably other browsers) behavior -- hiding the scrollbar unless it's necessary.

Without any research, I'd assume we could add some custom-styled scrollbars to address this? Maybe that would force them to always show? If that's the solution, I'd just have concerns with accessibility and OSes (like macOS) that have system settings for hiding scrollbars.

[OddBloke]

I'm not a front-end engineer at all, I'm afraid, so I won't have much useful input on a solution here.

To clarify, I do like the scrollbar only appearing once it's needed, I think that makes the experience much cleaner. It's the fact that its appearance causes text rewrapping that bugs me.

[ghost]

I took a quick look and CSS alone won't save us AFAIK. But we could implement some javascript scroll bars that don't cause any reflow. Hiding the OS bars all the time, unless JS is disabled.

[thebaer]

Ideally, I'd like to stay away from tons of extra client code just to avoid something relatively small.

Working around this is probably going to be much more effort than we can handle right now, so I'm going to mark this as "won't fix" for now. Perhaps with a future alternative editor offered within WF, or alternative external publishing clients, or better CSS, we might be able to address it in the future.