monaco-editor
monaco-editor copied to clipboard
[Bug] Wrong cursor position if editor has `transform: scale(0.4);`
Reproducible in vscode.dev or in VS Code Desktop?
- [X] Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- [ ] Not reproducible in the monaco editor playground
Monaco Editor Playground Link
Monaco Editor Playground Code
JS:
const value = `'''
Try to click in the area
between the lines.
The cursor might appear in the wrong
place
'''
def main():
print("Hello World!")
if __name__ == "__main__":
main()
`;
const myEditor = monaco.editor.create(document.getElementById("container"), {
value,
language: "python",
automaticLayout: true,
fontSize: 30
});
// remeasureFonts() doesn't help
setTimeout(() => {
console.log('remeasure fonts');
monaco.editor.remeasureFonts();
}, 1000);
HTML:
<div class="scaled">
<div id="container" style="height: 100%"></div>
</div>
CSS:
.scaled {
height: 100%;
transform: scale(0.4);
}
Reproduction Steps
- Apply
transform: scale(0.4);
to the container withmonaco-editor
- Click the area BETWEEN any code lines
Actual (Problematic) Behavior
- The cursor is placed in an unexpected place 2 lines away from the click
Expected Behavior
- The cursor is placed in the line directly above or below the clicked area
Additional Context
https://github.com/microsoft/monaco-editor/assets/2017344/90f90f94-e704-41c3-89fc-7ccd1bbde096
The problem doesn't appear if clicked directly on the line.
Possibly related to https://github.com/microsoft/monaco-editor/issues/2347
Could someone please take a look? This bug is easy to reproduce on the playground.
I have also encountered this problem, is there a corresponding solution? Thank you very much
This is a problem for me also, a solution would be great, thanks.
This is reproducible for me too