jupyterlab_markdown_switch_tab_scrolling_fix

[!TIP] This fix is part of the stellars_jupyterlab_fixes metapackage. Install all Stellars fixes at once: pip install stellars_jupyterlab_fixes

JupyterLab extension that prevents markdown files from scrolling uncontrollably when switching tabs while images load.

[!WARNING] This extension is a temporary fix and will be deprecated once JupyterLab core implements proper icon scaling. We plan to submit a PR to the main JupyterLab repository to address this issue natively. Once accepted and released, this extension will no longer be necessary.

The Problem

When you switch back to a markdown tab in JupyterLab, images reload and cause the viewport to jump as they render. This creates disorienting scroll drift that moves you away from where you were reading.

Key observations:

• Issue only occurs with markdown files containing images
• Triggered by tab switching (deactivate then reactivate)
• Browser recalculates layout as each image loads, causing cumulative scroll displacement
• Native JupyterLab has no scroll position protection during image rendering

The Fix

This extension locks scroll position when you switch to a markdown tab until all images finish loading.

How it works:

• Detects when markdown widgets become active via JupyterLab's shell signals
• Captures initial scroll position immediately on tab activation
• Monitors all image load events in the markdown
• Actively corrects any scroll drift (checks every 100ms)
• Releases lock after all images load and position stabilizes for 300ms
• User scroll (wheel or touch) immediately overrides the lock
• While the lock is live the widget node carries data-jp-scroll-guard="active"; other extensions read it to hold their own scroll restores until the lock releases

Implementation details:

• Maximum lock duration: 3 seconds
• Handles cached images that load instantly
• Uses WeakMap to prevent multiple guards on same widget
• Passive event listeners for performance

Technical Implementation

The extension hooks into JupyterLab's shell lifecycle using the ILabShell.currentChanged signal to detect tab switches. When a markdown widget activates, the handler searches for .jp-RenderedMarkdown containers and queries all image elements. It captures the initial scroll position (scrollTop/scrollLeft), then attaches load event listeners to track completion of image rendering.

A guard interval runs every 100ms, comparing current scroll position against the saved position. Any drift exceeding 1 pixel triggers immediate correction by resetting scrollTop/scrollLeft. The guard tracks stability (position unchanged for 300ms) and image load completion. Once all images finish loading and position remains stable, the guard releases. User scroll events (wheel or touchstart) immediately abort the guard to preserve manual navigation.

Core components:

• ILabShell.currentChanged signal handler detects widget activation
• DOM query selects .jp-RenderedMarkdown img elements for monitoring
• addEventListener('load', handler, { once: true }) tracks image completion
• window.setInterval() guard runs drift correction every 100ms
• WeakMap associates guard interval IDs with widget instances
• Passive event listeners detect user scroll intent without blocking

Requirements

• JupyterLab >= 4.0.0

Install

To install the extension, execute:

pip install jupyterlab_markdown_switch_tab_scrolling_fix

Uninstall

To remove the extension, execute:

pip uninstall jupyterlab_markdown_switch_tab_scrolling_fix

Contributing

If you would like to contribute to this extension, please refer to the Contributing Guide.