jupyter-book / jupyterlab-myst

Use MyST Markdown directly in Jupyter Lab
https://jupyter-book.github.io/jupyterlab-myst/
BSD 3-Clause "New" or "Revised" License
141 stars 16 forks source link

Scrolling over notebook got unexpected jump backs #243

Open AllanChain opened 2 months ago

AllanChain commented 2 months ago

Description

With jupyterlab-myst installed, scrolling over the notebook is not smooth. Specifically, when I try to scroll up, it can sometimes jump back, and I have to scroll multiple times to get to the place I want. Like the following screen recording:

https://github.com/executablebooks/jupyterlab-myst/assets/36528777/2ae6b7f0-1206-42cb-b9f3-e129d29ad334

Without jupyterlab-myst installed, I can scroll smoothly without issue.

Reproduction steps:

  1. Create a new venv

  2. Install jupyterlab and jupyterlab-myst

  3. Launch JLab and create a notebook

  4. Put something in and make it scrollable

  5. Scroll to the bottom and slowly scrolling up

Proposed solution

Sorry, I don't have any idea what's causing this issue.

Additional notes

Maybe it is related to https://github.com/jupyterlab/jupyterlab/issues/15795, but I can't reproduce that issue without jupyterlab-myst installed.

Environment:

agoose77 commented 2 months ago

Thanks for this report. Looks like it might be a performance issue of some kind. I'll dig in to this.

krassowski commented 1 month ago

I can reproduce this. Related to https://github.com/jupyterlab/jupyterlab/issues/16326

The problem is that myst changes height of the cell after it is attached; this pushes the viewport down, which in turns detaches the cell, preventing user from scrolling up. There may be a way to fix it upstream in JupyterLab.

In the meantime a simple solution would be to cache the rendered content so that it is shown immediately when cell gets attached. It seems that the markdown cells when rendered with myst start from a blank state and are populated afterwards.

To make it easier to reproduce I would suggest using a markdown cell with admonition and a mermaid diagram.