microsoft / microsoft/monaco-editor

[Bug] - Viewport scrolling doesn't keep in perfect sync when Monaco editor has a small fixed height

Open
#4,629 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html

Monaco Editor Playground Code

No response

Reproduction Steps
  1. Visit https://microsoft.github.io/monaco-editor/playground.html
  2. Add >10 lines of random content into the HTML view
  3. Using browser editor tools, inspect the DOM and find the div class="monaco-editor-react editor-container" element that wraps the HTML editor and set the height element (probably from 200px) to "80px" - only four lines of HTML should now be visible. (This replicates what happens when (my code, and I assume vscode.dev), is operating in a very browser-height-constrained environment)
  4. Use your arrow keys to arrow down.
Actual (Problematic) Behavior

When the arrow cursor gets to line 5, the cursor out of the viewport of Monaco
When the arrow cursor gets to line 7, the view port scrolls downward to try to keep the cursor in view, but it's always perpetually out of the view port. From a "scrolling viewport" perspective, it's as if Monaco always assumes that the viewport has room for at least 6 lines of code.

Expected Behavior

As you use the arrow keys to arrow around, the viewport should always keep the cursor in view.

Additional Context

Note: you can kind-of repro this on vscode.dev, though it's not realistically a "vscode.dev bug". If you set the browser zoom to 400% and set the browser height so narrow it only shows 4 lines of code, and you put in >10 lines of code inside of the window, the viewport scrolling is a little "out of sync".

This is opened as an accessibility bug in my project because when the browser zoom is 400% in my app on a ~900px tall browser window, I'm effectively giving Monaco about ~80px of vertical height, and the viewport scrolling isn't keeping the cursor in view which creates a form of an accessibility problem.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Monaco Editor Playground linked in the issue and reproduce the problem by setting the HTML editor container to 80px with more than 10 lines, then use the arrow keys while inspecting the DOM. Investigate the viewport behavior around the monaco-editor-react editor-container element; done means the cursor remains visible while navigating in the constrained editor.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.