Skip to content

Conversation

@somebee
Copy link
Contributor

@somebee somebee commented Dec 16, 2021

This PR fixes #139281

This PR also fixes microsoft/monaco-editor#2347 and microsoft/monaco-editor#531

When a rendered ViewLine contains foreign elements or is uses a non-monospaced font, VSCode uses a helper (RangeUtil.readHorizontalRanges) to calculate the pixel widths and offsets. This in turn uses Element#getClientRects and Range#getClientRects to retrieve the raw sizes as reported by the browser. If the editor element, or any of its parents are scaled using css transforms, the calculated sizes are incorrect.

This tiny patch calculates the scale of the view-lines in the DomReadingContext, and adjusts the resulting ranges in _createHorizontalRangesFromClientRects. It is only checking the offsetWidth of the viewLines element once, in the same step that it previously called getBoundingClientRect() on this element. It will not result in any additional layouts or reflows.

We ran into this issue at Scrimba.com (using monaco) when trying to animate the size of the editor when it transitions in. Decorations and selections have incorrect sizes and positions. This is also easy to test on the monaco playgrounds by simply scaling the whole document body document.body.style.transform = 'scale(0.75)' and then selecting code in any of the examples (only lines with variable length text or foreign elements).

Steps to Reproduce / test:

  1. Go to vscode.dev
  2. Create a simple css file with the content body { color: red; }
  3. Scale the document document.body.style.transform = "scale(0.75)"
  4. Select the code and/or move caret around to see wrong positions and sizes

Do the same in locally built vscode.dev to see that things are now rendered correctly.

@ghost
Copy link

ghost commented Dec 16, 2021

CLA assistant check
All CLA requirements met.

@somebee
Copy link
Contributor Author

somebee commented Dec 16, 2021

I now pushed an additional fix that corrects hit testing when element is scaled. This will also resolve microsoft/monaco-editor#2347 and microsoft/monaco-editor#531. The code only uses the existing editorPos and layoutInfo, so this change does not affect performance in any way.

@somebee somebee changed the title Fix rendering of decorations when editor is scaled via transform Fix decorations and mouse hit-testing when editor is scaled via transform Dec 16, 2021
@alexdima alexdima added this to the January 2022 milestone Dec 16, 2021
@alexdima
Copy link
Member

Thank you! Very nice!

@alexdima alexdima merged commit 81df452 into microsoft:main Dec 16, 2021
@github-actions github-actions bot locked and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Decorations rendered incorrectly in scaled editor Selecting using mouse doesn't work on some lines with transform: scale

2 participants