Suggestion box incorrectly offset with translate animated container

promeris commented 2 years ago

When displaying monaco editor in a container that is slided into screen via translate animation, the suggestion box is offset incorrectly by (width of screen - width of container). Disabling the fixedOverflowWidgets option is not something we can do, as the suggestion box would be cut at editor length.

Screenshot from 2021-11-25 14-24-45

monaco-editor version: 0.30.0 Browser: Chrome Version 90.0.4430.93 OS: Ubuntu Playground code that reproduces the issue:

const container = document.createElement("div");
container.className = "container";

const monacoElement = document.createElement("div");
monacoElement.className = "monaco";

container.appendChild(monacoElement);
document.body.appendChild(container);
monaco.editor.create(monacoElement, {
    language: 'javascript',
    fixedOverflowWidgets: true,
});

.container {
    width: 550px; /* increase/decrease to see offset change */
    height: 100vh;
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    top: 0;
    border: 1px solid black;
    transform: translateX(100%);
    animation: translateAnimation 1s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.monaco {
    width: 100%;
    height: 300px;
}

@keyframes translateAnimation {
    0% {
        transform: translateX(100%);
    } 100% {
        transform: translateX(0);
    }
}

mifopen commented 2 years ago

Here's much simpler example:

https://microsoft.github.io/monaco-editor/playground.html?source=v0.36.1#XQAAAAJGAQAAAAAAAABBqQkHQ5NjdTmD1v_fvV9qAMfxMYIuJLeSgI72lR6ixOKufaYJtcAR8DqwwzVXq_TrqWqWrjSlv4SK81Z1aVQejSOsuJ39WTRaKgLSf0giPJeCw0gX3WIVj6NAsNWK7DYLkh1t3CZlOpTjhVChHI3qvJ5YjLAMRcVi8EqFY8QkD7JrRQN4Q7aOSTh9U-_iu4EKn-FnFI9am2VrM_8wdQX5gU6E-O13ruuxa4oHgZimr0SsLzg0OzgBhFXBdaAm8u0KlL7DQ_NukSwPLbCdo9EtacxqXsE5WFfaicNLdFv1cndv3YW8-W9z6YBlB-jKgO4bFHshT-ruPoDCfPVqb_7z9szb

And then try to hover or type something

(edited by @hediet)

mifopen commented 2 years ago

@alexdima Do you have any estimations on how much time can the fix take? It's quite a critical issue for us as we're trying to render the editor inside a draggable panel. Maybe I can help with the PR if you give me some guidance and keywords?

alexdima commented 2 years ago

@mifopen a PR would be most welcome. Depending on the setting fixedOverflowWidgets or the option of the content widget to allowEditorOverflow, here is the code responsible for positioning content widgets.

mifopen commented 2 years ago

@promeris @alexdima Fixed elements inside transformed parents are positioned relatively to those transformed parents and not the body. http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms You can find dozens of issues and questions on the web regarding this. I don't think it'd be pragmatic to try to detect this case inside vscode (what if we have nested transforms 😬). For me the fix is eventually the following:

...
    fixedOverflowWidgets: true,
    overflowWidgetsDomNode: document.getElementById('monaco-editor-overflow-widgets-root')!,
...

    <body>
        ...
        <div id="monaco-editor-overflow-widgets-root" class="monaco-editor" style="z-index: 999;"></div>
    </body>

It looks like a legal way to escape transformed subtree. Anyway if you want your widgets to be fixed it doesn't matter where exactly in DOM they will be rooted (if the root is not transformed 😅).

xloc commented 11 months ago

Thanks for the information! They are super helpful. However, I found another issue with the overflow widget: the document details panel is not ported under the given overflow widget element

Please use the following playground link for reproduction.

type fun on the keyboard
click on the > at the end of the auto-completion entry
found the doc details panel is under the red overlay

link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.44.0#XQAAAALrAQAAAAAAAABBqQkHQ5NjdzmO6ObloP9xmco32Ozz4i7pNjj5tnnl_C2HstXj9Aq8RCnj9VWChsLAuxk3WXbM1XzM873zdu9e6mjsn1ihzJoM7Y_mqTh3hc86qbHa9YJ2h0YsmohXK5oIaP0BkzfX9j9RCqCQx14N5qGHeULEMy7c2gxgCzwFZetRhoKfx6bkhnoq7I_Qoe9gzmoQZZRh9hJEJAJgGqa6CuKUiui-VQxavt79Yk-2C7jcGWlFxgf6jD6pCCKy9BCqXNs3uyUsfNyScs_OXYnQeJ7QNVRuRMiLs1yzcpQYsnUT91jIaNDxv12dN6KCnVbyacaRpaMM2fiY8ifXWat18ffqLbjznasSipjBfLxMCsdOYomfpleaKnz0A8CNA87uif7Xl4LNhe-cfegPS3oU5ehp-SxqR6f1Sj8DQV0___f7tM4

Could anybody help to fix it?

alexdima commented 11 months ago

@xloc this has been recently improved via https://github.com/microsoft/vscode/pull/198730 . Could you please try with the latest editor nightly version?

xloc commented 11 months ago

Thanks for the reply, @alexdima !

Can I ask how to access the latest version? I tried the latest version on the playground site though, which is 0.46.0-dev-20231214. The problem is still there. playground-link

alexdima commented 11 months ago

Sorry about that, we're having a hiccup with the nightly build, the 0.46.0-dev-20231214 doesn't contain that change.

xloc commented 11 months ago

no problem at all. Thanks for your support! I can take a look later.

BTW, do you know typically how long a bug will take to be merged into the stable version? or where can I get this kind of info?

alexdima commented 11 months ago

BTW, do you know typically how long a bug will take to be merged into the stable version? or where can I get this kind of info?

We typically release a new editor version at the same time with a vscode release.

misha-erm commented 8 months ago

For anyone facing that issue on older monaco-editor versions:

I managed to workaround this issue by removing all properties that lead to new stacking context.

We show monaco editor inside a popup which has an enter animation with opacity so I'm removing will-change and animation-name on animationend event

KurtGokhan commented 8 months ago

Issue seems to persist in 0.47.0. Any updates?

microsoft / monaco-editor

Suggestion box incorrectly offset with translate animated container #2793