Issue with Height of Cells

[ghost]

First of all thank you for all your hard work with the notebook.

I have a very weird problem with Jupyter that nobody else seem to have reported so far. Specifically whenever I click on a cell (no matter if it's empty or not) it's height decreases making half of the line covered.

I'm using Python 3.5, Arch Linux and view the notebook in newest Firefox. I have a 4K screen so perhaps it's because of this?

Any help would be appreciated, maybe there is a simple solution rather than modifying CSS files.

Many thanks!

[ellisonbg]

That is definitely a bug!

[takluyver]

I think I have seen this before, but I'm not sure what causes it.

If you have updated Firefox recently, make sure you restart it - there are all sorts of weird things that can occur if Firefox has been updated but not restarted.

[ghost]

Thank you both for the prompt replies.

I have actually had this issue from the very start, consistently, regardless of Firefox version. It does not go away with restarts or updates. I also have the same issue on my notebook (again with Arch Linux and 4K screen).

Not sure if anything like Gnome windows scaling or Firefox plugins might cause it? Really like the notebook so really keen to make it work. Happy to help with pinpointing the cause as best as I can.

[takluyver]

Firefox plugins is a possibility. Can you try it with Firefox in safe mode (disables plugins)

[ghost]

Did some quick testing - the issue is not caused by the add-ons but the but the appearance theme. Specifically this one;
https://github.com/gnome-integration-team/firefox-gnome/

Is this something that should be dealt with on the Notebook side or the theme side? I presume some themes might cause it while others won't.

[takluyver]

Hmmm. I'm surprised that a theme can affect how stuff inside a page looks. I don't really know who to talk to about that.

[ghost]

I see. Well thanks very much for your help. If anyone else has a similar problem at least it will be clear what is the cause. I will just look for alternative theme I can use that will not affect the cells.

Keep up the great work with the notebook.

[Carreau]

Yes, that's a known CodeMirror issue where firefox bady report the measurement of things on the DOM.

It pops up regularly, and depending on system can (sometime) be solved by : resizing the window, zooming in then out, focusing the cell...etc. It's unfortunate, and sadly there is not much we can do .

[artwr]

Funnily enough, I encountered a similar issue but on Chrome.
. For me it usually happens for long running notebooks (think days). Closing the tab and reopening it usually fixes things.

[ellisonbg]

Hmm, I have also seen this in JupyterLab recently, may be new bugs showing up...

Targeting to 4.3 so we can investigate...

[takluyver]

Has anyone investigated, and/or does anyone have time to investigate before we do 4.3, which I'd like to release fairly soon?

Ping @ellisonbg

[minrk]

We've updated to CodeMirror 5.21 recently, which could possibly contain a fix, but I haven't been able to reproduce this one in a while. Generally these height-measuring problems are in (and fixed in) CodeMirror.

[takluyver]

I see that the CM update (#1921) was already backported. So I'm going to punt this to 5.0. Maybe it will be already fixed.

[rgbkrk]

I've seen this in Chrome too, on non-Jupyter apps using CodeMirror. Have started seeing it less across the ecosystem again, definitely a measurement issue that was pervasive for a bit.

[cassiusoat]

I encountered a similar issue on Chrome, and this issue can also occur on safari and firefox in my MBP. But oddly enough, when I pulled out the mouse from laptop and used trackpad only, this issue can not occur. When I used mouse again, this issue occurred again.

[jaykinghorn]

I have the same issue on Chrome. I don't believe I'm using Code Mirror anywhere. This was a notebook that showed this appearance upon open. (screenshot attached).

[minrk]

@cassiusoat's note about mouse and trackpad might be an important clue. macOS can hide scroll bars until scrolling starts. I believe the default (certainly an option) is to hide by default when using a gesture-enabled trackpad, but always show scroll bars if a mouse is in use.

If CodeMirror is measuring assuming a scroll bar would always be present, but it isn't, we could get this behavior (cutoff of the width of one scroll bar). To enable this behavior explicitly:

System Preferences > General > Show scroll bars: When scrolling

It's possible it's specifically an interacting with the 'When scrolling' setting. It's also possible that it's related to switching back and forth in the "Automatically..." state, where CM makes a decision based on prior state, but doesn't update if that state changes.

[minrk]

@jaykinghorn what versions of:

• notebook
• browser(s)
• OS

If you are using macOS, can you share your General > Show scroll bars setting? Does changing it have any effect?

Every text area in the notebook is CodeMirror, so it's always involved somehow.

[jaykinghorn]

The truncated cells seem to happen after I close my laptop and come back to it after a period of time. I’ll do more testing to see if it always happen after the computer sleeps, or whether it is intermittent. I had my scroll bar setting at the default “Automatically based on mouse or trackpad.” When I change this setting to Always, it restores the correct height of the cells. I’m using: Version 4.2.1 with Python 2.7.12 |Anaconda custom (x86_64)| (default, Jul 2 2016, 17:43:17) [GCC 4.2.1 (Based on Apple Inc. build 5658) (LLVM build 2336.11.00)] Browser is Chrome Version 55.0.2883.95 and Mac OS 10.11.4. Good to know about Code Mirror. Thanks for your help. Jay On February 1, 2017 at 8:00:46 AM, Min RK (notifications@github.com) wrote: @jaykinghorn <https://github.com/jaykinghorn> what versions of: - notebook - browser(s) - OS If you are using macOS, can you share your General > Show scroll bars setting? Does changing it have any effect? Every text area in the notebook is CodeMirror, so it's always involved somehow. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1560 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMzoZEPYPhdFi_A9Mrja6ohmhO2MoVe5ks5rYJ4dgaJpZM4I7ahl> .

[gnestor]

We need to be able to predictably reproduce this. Based on @rgbkrk's comment, this might be an issue with CodeMirror (possibly codemirror/codemirror5#3129, codemirror/codemirror5#3679), but without a reproducible demo, we are not likely to get help from the CM team.

[takluyver]

Bumped to backlog as we're still not sure what the cause is, and it doesn't seem likely we can fix it for 5.1.

[cholmcc]

Sorry I didn't get back sooner (vacation time) I found the cause - the installation of libjs-codemirror (via Debian package) was incomplete - specifically the links /usr/share/javascript/codemirror/codemirror.css /usr/share/javascript/codemirror/codemirror.js was broken. I found this on two independent machines, so my guess is something was wrong with the package. Reinstalling the package (same version) reinstated the links and all is dandy. I guess you can close this from my side at least. Thanks. In case you're interested: I found the problem by using the built-in debugger tools of the browser - specifically I say 404 errors on the two files mentioned. Yours, Christian

…

On Thu, Jul 13, 2017 at 4:50 PM, Thomas Kluyver ***@***.***> wrote: Bumped to backlog as we're still not sure what the cause is, and it doesn't seem likely we can fix it for 5.1. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1560 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AG3ncFvd3j0YooOeWEt50bKrUnBPknNrks5sNi65gaJpZM4I7ahl> .

--

___ | Christian Holm Christensen |_| | ------------------------------------------------------------- | | Address: Niels Bohr Institute _| Blegdamsvej 17 _| DK-2100 Copenhagen O ____| Web: http://cern.ch/cholm | | Cell: +45 24 61 85 91

[gnestor]

@cholmcc Nice investigatory work! I can't reproduce this myself, but I think that your findings will be helpful for others should they encounter it. I am going to close this and mark as "reference."

[BastiaanBergman]

I have the exact same issue in Jupyter (as part of anaconda2) on Chrome on OSX. Does anyone have a hint how to check the version of CodeMirror and/or how to update it? It doesn't seem to be managed by Conda,...

[takluyver]

CodeMirror is a Javascript package, and it's bundled with the notebook. There'll be a notebook 5.5 release soon with the latest codemirror.

[cab938]

@takluyver Does this mean it has been fixed in the codemirror version which comes with 5.5, or that you figure it might be fixed in that version and you're not sure?

[tufixm]

Same issue here! Occurs every time I plug/unplug the USB adapter or the charging cable.
For reference: I have a MacBookPro running macOS High Sierra 10.13.6
Using notebook server version 5.5.0
Running the following python version:
Python 3.6.5 |Anaconda, Inc.| (default, Apr 26 2018, 08:42:37)
[GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)]

I also have a partial workaround for the following situation:

1. Plug the mouse or plug/unplug the power cable;
2. Input cells get trimmed, as reported previously
3. If I click in the little space between an input cell and the previous output cell above, the input cell returns to its normal size.

This doesn't work in case I unplug the mouse. If I do step 3 with the trackpad, the input cells remain trimmed.

[gnestor]

That is so bizarre. I can't imagine how plugging in the power cable or a USB device would affect how the notebook is being rendered! Please share any other observations that might help us hunt this down.

[danmackinlay]

This is a brilliant observation by @tufixm - plugging in a mouse on macOS does change the rendering of scrollable areas - moreover, it does it in a different way across firefox and chrome. Here are some miscellaneous text areas in firefox on wikipedia, for example. Presumably the same issue arises in codemirror/jupyter.

[rgbkrk]

I am never moving my laptop ever again. All peripherals must stay the same.

[gnestor]

@danagilliann Thanks for sharing this observation. This is clearly an issue affecting Chrome and Firefox and not restricted to the notebook or codemirror but apparently all textarea elements. Any more info would be much appreciated 👍

[whyboris]

I can confirm this bug occurred for me when using Jupyter Lab (version 0.34.12) with an external monitor (different resolution than my Mac) and disconnecting the external monitor (removing the HDMI made the browser screen go to the laptop monitor and the height of cells was incorrect).

Fixing the bug was simple: by zooming out to 90% and zooming back in to 100% with Chrome Ctrl + - / +

edit: Issue #1467

[gureckis]

I would often find this happened to my notebooks running in Safari overnight. Based on this thread I found a reproducible cause: If "Show Scroll bars" is set to "Automatically based on mouse or trackpad" in the General System Preferences panel, AND bluetooth is turned off (disconnecting my BT mouse) you can visibly see many of the Mac OSX windows resize slightly (causing the cell height issue). If you turn off the "scroll bar setting" to be "Always" the problem appears to go away because the windows aren't slightly resized by the OS on BT peripheral (probably mouse) connect/disconnect. My overnight issue was possibly that my BT mouse was going to sleep or BT went into some low-power mode. Touching a cell number for a cell with the mouse causes the cell to resize and display properly when it has been misaligned. (Jupyter Notebook: 4.4.0, Mac 10.14.4, Safari 12.1 14607.1.40.1.4)

[gnestor]

This is certainly happening in Chrome, too. So I think we can conclude that this is caused by the browser resizing. This can be caused by an auto-hiding scrollbar, switching between internal/external display, and I've also seen it occur when screen sharing.

I'm not sure if we can do anything about it. Once a cell is clicked/focused, it resizes itself and the height is corrected, so perhaps each cell/codemirror instance can listen for browser resize events and then update themselves (or whatever happens when it's focused).

[stepp1]

I can confirm this bug occurred for me when using Jupyter Lab (version 0.34.12) with an external monitor (different resolution than my Mac) and disconnecting the external monitor (removing the HDMI made the browser screen go to the laptop monitor and the height of cells was incorrect).

Fixing the bug was simple: by zooming out to 90% and zooming back in to 100% with Chrome Ctrl + - / +

edit: Issue #1467

Works on Safari too

[tyrionz]

@cholmcc Have you tested notebook 5.0.0? I'm curious if this codemirror bug (?) has been resolved...

I'm running jupyter notebook 5.7.8 on chrome in windows10 and still have the half height cell CodeMirror issue. To me the cell displayed correctly until I clicked the cell and start to edit, that's when the cell displays with less height.

[ibozkurt79]

The truncated cells seem to happen after I close my laptop and come back to it after a period of time. I’ll do more testing to see if it always happen after the computer sleeps, or whether it is intermittent. I had my scroll bar setting at the default “Automatically based on mouse or trackpad.” When I change this setting to Always, it restores the correct height of the cells. I’m using: Version 4.2.1 with Python 2.7.12 |Anaconda custom (x86_64)| (default, Jul 2 2016, 17:43:17) [GCC 4.2.1 (Based on Apple Inc. build 5658) (LLVM build 2336.11.00)] Browser is Chrome Version 55.0.2883.95 and Mac OS 10.11.4. Good to know about Code Mirror. Thanks for your help. Jay On February 1, 2017 at 8:00:46 AM, Min RK (notifications@github.com) wrote: @jaykinghorn https://github.com/jaykinghorn what versions of: - notebook - browser(s) - OS If you are using macOS, can you share your General > Show scroll bars setting? Does changing it have any effect? Every text area in the notebook is CodeMirror, so it's always involved somehow. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1560 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AMzoZEPYPhdFi_A9Mrja6ohmhO2MoVe5ks5rYJ4dgaJpZM4I7ahl .

Changing MAcOS settings to 'Always' solved the issue for me

[PGryllos]

Hi, Is there any proposed solution here?

[tyrionz]

I tried using some background Theme mods and it solved the problem for me.

…

Sent from my iPhone

On Feb 12, 2020, at 1:10 AM, Gryllos Prokopis ***@***.***> wrote:  Hi, Is there any proposed solution here? — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[gulatisha]

Hi, Is there any proposed solution here?

If you are working on MacOS try changing the scroll bar setting to 'Always' as suggested here #1560 (comment)
It worked for me.
I am using Firefox version 76.0.1(64 bit) on MacOS. 10.15.5

[DarrenCook]

I'm seeing this on Linux Ubuntu, Firefox 85. Needing to add an extra blank line at the bottom of each cell basically makes it unusable :-(. It does work in Chromium.

I had these versions installed:

jupyter (1.0.0)
jupyter-client (5.2.4)
jupyter-console (6.0.0)
jupyter-core (4.4.0)

So just used pip3 to update them, to this:

jupyter (1.0.0)
jupyter-client (6.1.11)
jupyter-console (6.2.0)
jupyter-core (4.7.1)
jupyterlab-pygments (0.1.2)
jupyterlab-widgets (1.0.0)

Which unfortunately made no difference.

Type 'copyright', 'credits' or 'license' for more information
IPython 7.16.1 -- An enhanced Interactive Python. Type '?' for help.```

I'm only using one screen, and changing mouse made no difference. Zoom in and out makes no difference.