[Bug] Wrong cursor position if editor has `transform: scale(0.4);`

[Serhii Holinei]

Reproducible in vscode.dev or in VS Code Desktop?

• 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

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

1. Apply transform: scale(0.4); to the container with monaco-editor
2. Click the area BETWEEN any code lines

Actual (Problematic) Behavior

3. The cursor is placed in an unexpected place 2 lines away from the click

Expected Behavior

3. The cursor is placed in the line directly above or below the clicked area

Additional Context

Apr-15-2024.14-47-14.mp4

The problem doesn't appear if clicked directly on the line.

Possibly related to #2347

[Serhii Holinei]

Could someone please take a look? This bug is easy to reproduce on the playground.

[Mossoul]

I have also encountered this problem, is there a corresponding solution? Thank you very much