Ghost: Code injection scrollbar not working

[petemahon]

Issue Summary

Using Chrome 66.0.3359.139 on Windows 10, 64 bit.

When custom code is added to the blog header via the Code Injection page and goes beyond the edge of the textbox, the scrollbar presents itself but is not clickable. The text box can only be scrolled to the right when highlighting code and dragging the selection to the right.

Steps to Reproduce

1. Open Code Injection page in Settings
2. Enter code which extends beyond the right side of the textbox.

The scrollbar should be interactive.

Technical details:

• Ghost Version: 1.22.4
• Node Version: v6.11.0
• Browser/OS: Chrome 66.0.3359.139 on Windows 10, 64 bit
• Database: Mysql

Edit: Updated with Node version

[aileen]

Hey @petemahon

I am not able to reproduce this. The scroll bar is clickable for me. I wonder what's the reason for that....

[vikaspotluri123]

I'm able to reproduce this on Chrome 67 (I know it's beta, I have to figure out a way to use stable chrome for testing 😬) using Windows 10 Version 1803

Here's a screencap of what I'm seeing; I can't vertically scroll until some event allows me to (I originally thought I just had to make an edit, but I tried that later and it still didn't work, so it could also be a timing thing).

Note at the beginning when my mouse is still, I'm attempting to scroll using the ThinkPad Nipple™ which works pretty much everywhere else. An addendum to this issue is scrolling using the mouse scroll (which is what the nipple scrolling is) seems to not work in the code injection section, even after I can scroll using the scrollbar. @petemahon can you reproduce this with a normal mouse, or could this just be an edge case for me?

Let me know if anything's unclear! 😃

[petemahon]

Hey @AileenCGN and @vikaspotluri123, thank you both for your input. I've just updated this morning to 1.22.8 and I still see the same issue.

I have reproduced the issue in Firefox 60.0 (64 bit) on Linux Mint, and also on Windows 10 using the latest stable Chrome version.

@vikaspotluri123 I can only move around the section by dragging the text - touchpad, mouse scroll and touchscreen interaction are all unavailable for me.

[kevinansfield]

I'll take a look at this next Monday unless anyone feels like jumping on it in the meantime 😄

[MattAunger]

Complete noob here so probably wrong.

I'm able to reproduce the issue in Chrome and Opera.
For me, changing pointer-events: none; to pointer-events: auto; for both .CodeMirror-hscrollbar and .CodeMirror-vscrollbar seems to fix. Not sure if there are dependencies on these classes elsewhere that will be thrown out of whack.

Like I said, probably wrong so take it or leave it 😄

[kevinansfield]

I think the pointer-events: none; / pointer-events: auto; switching that CodeMirror does is likely the problem here.

There are some related issues here if anyone wants to try digging in:
https://github.com/codemirror/CodeMirror/issues/4676
https://github.com/codemirror/CodeMirror/issues/3677

I've not had a chance to look at it properly unfortunately but it sounds like either:

1. something we're doing in our styles is messing up CodeMirror's initial scroll calculations
2. CodeMirror has buggy behaviour on non-macOS systems where scrollbars are always visible

I would suggest 2 is the first place to look, if it's reproducible with stock CodeMirror then an issue will need to be opened there.

[evexoio]

@kevinansfield I could reproduce the bug on windows,

I checked CodeMirror's demos and they worked properly on windows.

so I think its the first option that we should dig in.

something we're doing in our styles is messing up CodeMirror's initial scroll calculations

Edit: I pushed a css change to fix this problem, please review

[kevinansfield]

Vertical scroll is also broken on macOS. I expect it has something to do with this line that was added to fix a double scrollbar bug https://github.com/TryGhost/Ghost-Admin/commit/af91377a7df819e357da26d12026d54119a67528