[Bug] fixedOverflowWidgets=true makes suggestion widget (Quick Fixes, Markers, Tips etc.) show at a wrong location

[kareldonk]

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

https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.0#XQAAAAJOCAAAAAAAAABBqQkHQ5Njdzm5yR5xIP9xmco32QA-Lc78yfJeNbANNMzmXC8F1I65y0uteNWlST5NCkr4M9I4h0WsehizhI-Wm7TCWApm4vt9C5s0tHkL_P_OuSGbDYwR4znIeQ_OsvsrLzwwHYm8I_OQmJYVwdbfqdsmLSqhApOUjlttX7s8emFzKBs6a2prvvghcazSZ9-RVh25HOyP420ml3vm0Ewh4RUood6-KP2fOUJRM2W-t09ykCHdcYLrLy5LU0AhSZFzfHFUWTPyfiWzI6p1aHKIPb5HxMraAW5Wdv_sDReRUk0nkLT7CAfE5HQ7Nevv0NnbAIktmn61xRD7xh4AmmIh3YN10VgJQ9vSiiR7RLqjNPFFR4inNsc2iYJOwy47kux84YLUpPyZgueC7mKasHSfIo1LHOaO96eBxBJgPYJwNgy5CdLMDPce0v9KuSHQKljBRuq5ZjMU1E7ihfPGSnGxxG7_3uTR2P3r7TLESZ7kkFNvgyCVnwKGYhY-4GjtfNSTIsknx6J_6t4dfswG-sYRRaRH4vM_KzDTum7GMhbjKJhlUU26maAg7jr33Ypm1M34oOH9xn-uhAyHa9mlNDfbsu13fP-2sqMwmQGdZ9NnilfYl8s-j7l-yFNFt_N1sln2jeWdJxCltkqT3ZQSqQEII2gOjCMkzqwTF6VUHKlSWDut4kYSYrKe6-0jdS6_LCUX6tNMdnqgR9gIse7nK1RTVgF1q7MuWzhNpfE_u6FTkscBL6Qjksdfhd1lDb1caIaE19XzNtWSnLt0DCnkh1myvgLJ9avmCwltJaIRhmjNOjRYs2JeGRDIoR0Ow589g_FVe-3DsIHPw5jmXhgQcyJkK7eoBUuHVeXwOZgCB9wdjUup2bHNUgYuj--Mn9Z3kcjyoaBHt7S_tkNTGo-q6eZ6z9UZP1liTWPUh4gfFjxjdTA9TXSG65WBRNfMdVyFJKajd6_lp4avyV1NZcXlFok2x4B-tv5Fa4yZPUr8AoHBMyD2Hy2xgD1XlgtpNgcYdLqOGAeC_P0DhmRKI1_rUkn29BMl8tthL30eTrEqT7nJX1qsew0tYXWVg8sFcRezQAnD1WbBZFwC0FN5lns5JlXFC6k0ef6A2Dr17prFJ_-vH0TiY1qJFVdvv-rnnRH6Xy5m_i6SDjHpdIVvlVd63wlEEz83dV11XPtg4P_lV6fc

Monaco Editor Playground Code

JS

function validate(model) {
	const markers = [];
	// lines start at 1
	for (let i = 1; i < model.getLineCount() + 1; i++) {
		const range = {
			startLineNumber: i,
			startColumn: 1,
			endLineNumber: i,
			endColumn: model.getLineLength(i) + 1,
		};
		const content = model.getValueInRange(range).trim();
		const number = Number(content);
		if (Number.isNaN(number)) {
			markers.push({
				message: "not a number",
				severity: monaco.MarkerSeverity.Error,
				startLineNumber: range.startLineNumber,
				startColumn: range.startColumn,
				endLineNumber: range.endLineNumber,
				endColumn: range.endColumn,
			});
		} else if (!Number.isInteger(number)) {
			markers.push({
				message: "not an integer",
				severity: monaco.MarkerSeverity.Warning,
				startLineNumber: range.startLineNumber,
				startColumn: range.startColumn,
				endLineNumber: range.endLineNumber,
				endColumn: range.endColumn,
			});
		}
	}
	monaco.editor.setModelMarkers(model, "owner", markers);
}

const value = `12345
abcd
234.56
12345
abcd
234.56`;
const uri = monaco.Uri.parse("inmemory://test");
const model = monaco.editor.createModel(value, "demoLanguage", uri);
const editor = monaco.editor.create(document.getElementById("container"), {
	model,
    fixedOverflowWidgets: true,
});
validate(model);
model.onDidChangeContent(() => {
	validate(model);
});

HTML

<div id="root">
    <div id="topspace"></div>
    <div class="show-problem" style="height: 100%; overflow:hidden; position:relative;">
        <div style="height: 100%; position: relative;overflow:hidden;">
            <div id="container" style="height: 100%;">
            </div>
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.show-problem {
    transform: translate(0px); 
    filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.05)); 
}

#root {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-left: 100px;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

#topspace {
    width: 100%;
    height: 200px;
    background-color:red;
}

Reproduction Steps

See the code in the playground. Of importance:

Set the fixedOverflowWidgets option to true. And make sure that the show-problem class is on the div and the class has styles as follows:

.show-problem {
    transform: translate(0px); 
    filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.05)); 
}

Actual (Problematic) Behavior

With the configuration as provided in the playground sample, when you hover over the markers placed in the editor, the suggestion widget gets displayed at a wrong position far from the hovered marker. This position depends on the spacing on the left and top in the yellow and red areas. If you increase the width/height of those areas by changing the padding and/or height, the suggestion widget position also moves accordingly.

This problem only happens if you include the styles that are included in the show-problem class, namely the filter and transform. Any one of them is enough to trigger the problem. Remove the show-problem class and the problem goes away and the suggestion widget gets displayed at the expected position when you hover over the text with markers.

Expected Behavior

Suggestion widget should always display at correct position.

Screenshot is with the show-problem class removed from the div.

Additional Context

This is related to: #2503
@hediet asked for a repro sample. ask and you shall receive.
Problem still exists in version 0.52.0.