microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.21k stars 3.58k forks source link

[Bug] There is always a focus-border around editor when editor background is transparent #4455

Open KurtGokhan opened 6 months ago

KurtGokhan commented 6 months ago

Reproducible in vscode.dev or in VS Code Desktop?

Monaco Editor Playground Link

Playground link

Monaco Editor Playground Code


monaco.editor.defineTheme("myCustomTheme", {
    base: "vs",
    inherit: true,
    rules: [],
    colors: {
        "editor.background": "#00000000",
                "focusBorder": '#ff0000',
    },
});

const value = `function hello() {
    alert('Hello world!');
}`;

const myEditor = monaco.editor.create(document.getElementById("container"), {
    value,
    language: "javascript",
    theme: 'myCustomTheme',
});

Reproduction Steps

Set the editor.background to a transparent value and you should be able to see the border around the editor.

Actual (Problematic) Behavior

There is always a focus border around the editor

Expected Behavior

There shouldn't be a focus border around the editor

Additional Context

The issue was first introduced in v0.46.0. Specifically this commit seems to be the culprit.

CGNonofr commented 5 months ago

It also happens when zooming out image

hackinghacker1 commented 1 week ago

everyone is useless