[Bug] Bug: Chrome on macOS loses editor focus after moving window between Retina and non-Retina displays (Space key scrolls the page instead of inserting a space)

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

When using Monaco Editor (tested with [email protected] and @monaco-editor/[email protected]) on macOS Chrome, the editor loses focus after the browser window is moved between monitors with different device pixel ratios (DPR) — for example, from a Retina MacBook display (DPR 2.0) to an external display (DPR 1.0).

After this happens, pressing the Space key scrolls the entire page instead of inserting a space character in the editor. The editor seems to lose focus internally, even though visually the caret is still shown.

This issue does not happen in Firefox or Safari. It also does not happen on Chrome if the window stays on one monitor.

Expected behavior

After moving the browser window between monitors (with or without resizing), the Monaco editor should remain focused and fully editable. The Space key should continue to insert a space instead of scrolling the page.

Actual behavior

• Editor appears focused (caret blinking), but Space triggers page scroll (like pressing PageDown).
• Clicking inside the editor again restores proper typing behavior.
• Problem is reproducible only in Chrome on macOS when DPR changes.
• Setting zoom: 90% on the editor container or moving the window back to the Retina display “fixes” it temporarily.
• Works correctly in Firefox.

Steps to reproduce

1. Open a simple page using @monaco-editor/react:

`import Editor from "@monaco-editor/react";

export default function Demo() { return ( <div style={{ height: 400 }}> <Editor height="100%" defaultLanguage="javascript" defaultValue="// try pressing Space" options={{ automaticLayout: true, useShadowDOM: true, }} /> ); } `

1. Run it in Chrome on macOS.
2. Type something — Space works normally.
3. Move the Chrome window from the built-in Retina display to an external monitor with a different DPR (e.g. 1.0).
4. Try pressing Space again → the browser scrolls instead of inserting a space.

Workarounds / Observations

• Adding a handler that calls editor.focus() on pointerdown fixes the issue temporarily.
• Adding a ResizeObserver or relayout (editor.layout()) after a DPR change also restores functionality.
• Firefox and Safari keep the focus correctly even when DPR changes.
• Using zoom: 90% on the wrapper also fixes the issue (indicating a layout/compositing glitch in Chrome).
• useShadowDOM: true and automaticLayout: true mitigate, but don’t completely prevent, the problem.

Possible cause

When the window moves between monitors with different devicePixelRatio, Chrome recomputes compositing layers and repaints elements. During this process, the hidden