LearnNewsExamplesServices
Frontmatter
id8846
titleFix Monaco Editor Background Glitch
stateClosed
labels
bugdesign
assigneestobiu
createdAtJan 21, 2026, 12:13 PM
updatedAtJan 21, 2026, 12:20 PM
githubUrlhttps://github.com/neomjs/neo/issues/8846
authortobiu
commentsCount1
parentIssue8727
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 21, 2026, 12:20 PM

Fix Monaco Editor Background Glitch

Closed v11.23.0 bugdesign
tobiu
tobiu commented on Jan 21, 2026, 12:13 PM

Fix a 1px rendering artifact in the Monaco Editor wrapper caused by rounding errors.

Problem: The Monaco Editor's internal background color (e.g., #1e1e1e in dark mode) can be 1px smaller than the wrapper container, revealing the wrapper's background color. Currently, the wrapper hardcodes background-color: #fffffe.

Solution:

  1. Refactor SCSS: Update resources/scss/src/component/wrapper/MonacoEditor.scss to use a CSS variable for background-color.
  2. Create Theme Files:
    • resources/scss/theme-neo-dark/component/wrapper/MonacoEditor.scss: Set var to #1e1e1e.
    • resources/scss/theme-neo-light/component/wrapper/MonacoEditor.scss: Set var to #fffffe.

Context: This ensures the wrapper background matches the editor content, masking the 1px gap.

tobiu added the bug label on Jan 21, 2026, 12:14 PM
tobiu added the design label on Jan 21, 2026, 12:14 PM
tobiu added parent issue #8727 on Jan 21, 2026, 12:14 PM
tobiu assigned to @tobiu on Jan 21, 2026, 12:14 PM
tobiu referenced in commit 67992b9 - "fix: Fix Monaco Editor Background Glitch (#8846)" on Jan 21, 2026, 12:20 PM
tobiu
tobiu Jan 21, 2026, 12:20 PM

Input from Gemini 3 Pro:

✦ I have resolved the 1px background glitch.

Changes:

  1. Refactored SCSS: Updated resources/scss/src/component/wrapper/MonacoEditor.scss to use the CSS variable var(--monaco-editor-background-color).
  2. Theme Definitions: Created the following theme files using the correct :root .neo-theme-... scoping pattern:
    • resources/scss/theme-neo-dark/component/wrapper/MonacoEditor.scss: Sets variable to #1e1e1e.
    • resources/scss/theme-neo-light/component/wrapper/MonacoEditor.scss: Sets variable to #fffffe.

This ensures the wrapper background visually matches the editor canvas, masking the sub-pixel rendering artifact.

tobiu closed this issue on Jan 21, 2026, 12:20 PM