Bug: Ruler disables scrolling when mouse is in cell

[MattKleinsmith]

When I enable the Ruler nbextension, I can no longer scroll through the notebook when my mouse is over an input cell. The experience is that of getting stuck, "Ahh! Gah!", and pulling the mouse out of the cell to enable scrolling.

System specs

• jupyter_contrib_nbextensions 0.3.3
• jupyter_nbextensions_configurator 0.2.8
• Google Chrome (Version 61.0.3163.100)
• Ubuntu 16.04
• Docker (nvidia-docker)
• Python 3.6
• Jupyter 4.2.1
• Jupyter notebook 5.0.0

[juhasch]

What browser do you use ?

Can you try if this happens with the basic Codemirror example ? https://codemirror.net/demo/rulers.html

[MattKleinsmith]

@juhasch

I use Google Chrome. (Thanks for asking, I updated the original post.)

The stuckness doesn't happen in the Codemirror example.

After looking at the situation more closely I noticed:

• The first scroll motion (no matter how big) causes a tiny (aggravatingly tiny) scroll, creating the stuck feeling. Once in a while this doesn't happen, but it can be reproduced on command within seconds.
• The second scroll motion is normal

"First" in "first scroll motion" is with respect to a new direction. For example, if I want to scroll up and then down, I'll need to get through the upward stuckness with a scroll, then scroll up, then get through the downward stuckness with a scroll, and then scroll down.

[MattKleinsmith]

This bug doesn't occur on Firefox 56.0 (with the same system specs in the original post).

[juhasch]

I can reproduce this with Chromium under Linux. Now unfortunately, we have four parts playing together here: the extension itself, Jupyter notebook, Codemirror and the Browser.

There is not much the ruler extension does by itself, it only enables the existing CodeMirror option. If I comment out the corresponding line in the extension, scrolling works again, as expected.

I don't have an idea what could be done about this from here.

[jcb91]

Yeah, this is an inconvenient complicated situation :(

@juhasch I think you're right that the nbextension doesn't really do enough to be responsible itself. My guess would be that this is either an issue in the base CodeMirror implementation, or (perhaps more likely!) a result of some notebook CSS that's interacting with it in an unintended manner. The fact that it seems to be intermittent and not consistent across browsers hardly helps either 🤣

See for instance https://github.com/codemirror/CodeMirror/issues/2439, which mentions padding, and the later part of https://github.com/codemirror/CodeMirror/issues/4042, which was caused by notebook's CodeMirror CSS not matching CodeMirror's expectations.

[brianmcguckin]

Did you ever end up finding a solution or work around for this? FWIW I have this issue with Chrome 67.0.3396.99, Firefox 60.0.1 and Firefox Nightly 63.0a1 (2018-07-01) (64-bit) browsers on Jupyter 5.5

[nsymms]

So I guess this isn't going to get fixed? I'm hitting this as well in Jupyter and Google's Colab.

Whenever the ruler is enabled, it somehow makes the cell (or CodeMirror's document?) think it is slightly larger than it was, so it now has its vertical scrollbar active within the cell. But you can't see the cell's scrollbar because it is blocked out via some CSS margin-fu. Unless you remove that margin element in the browser's debug window.

So the notebook cell thinks it's a little larger and needs to scroll. And I get "stuck" and can't scroll the larger document with the mouse wheel; just the cell itself. I can see the cell scrolling a couple of pixels up or down, but that's it. If I spin the mouse wheel fast enough, it eventually starts scrolling the entire page.

I think @jcb91 is on the right track towards the cause. It must be some CSS within the notebook that is messing with CodeMirror. I tried to sift through it all but OMG it's a crazy mess. I'll keep at it for awhile and hopefully can find a solution.

It's very annoying and I guess only a few of us lucky people experience it. I'm on Chrome v74. It's been happening throughout many versions of chrome and firefox, though.

[t-makaro]

What browser do you use ? Can you try if this happens with the basic Codemirror example ? https://codemirror.net/demo/rulers.html

If I set the height of the class="CodeMirror cm-s-default" div to auto so that it does not have a scroll bar by default, then I do see this issue in the CodeMirror example.

[magicalhobo]

I can repro this on Chrome 75.0.3770.100 and Firefox 68.0.1 with Windows 10 on the CodeMirror demo without any modifications.

[juhasch]

So the best place to report this is probably https://github.com/codemirror/codemirror

[t-makaro]

I submitted a fix to codemirror. A release of codemirror along with Jupyter notebook updating to the latest version should fix the issue.

[t-makaro]

The can be closed now that the upstream PR has been merged.