Fix decorations and mouse hit-testing when editor is scaled via transform #139282
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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#getClientRectsandRange#getClientRectsto 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 calledgetBoundingClientRect()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:
Do the same in locally built vscode.dev to see that things are now rendered correctly.