Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Suggestion box incorrectly offset with translate animated container #2793

Open
promeris opened this issue Nov 25, 2021 · 12 comments
Open

Suggestion box incorrectly offset with translate animated container #2793

promeris opened this issue Nov 25, 2021 · 12 comments
Assignees
@alexdima
Labels
bug Issue identified by VS Code Team member as probable bug

Comments

@promeris
Copy link

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);
    }
}
@hediet hediet added the bug Issue identified by VS Code Team member as probable bug label Dec 9, 2021
@mifopen
Copy link

mifopen commented Dec 21, 2021 •
edited by hediet
Loading

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

image

And then try to hover or type something

(edited by @hediet)

@mifopen
Copy link

mifopen commented Dec 21, 2021

@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
Copy link
Member

@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
Copy link

mifopen commented Dec 22, 2021

@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 😅).

@mifopen mifopen mentioned this issue Dec 22, 2021
Closed
@scebotari66 scebotari66 mentioned this issue Oct 18, 2022
Closed
1 task
@hediet hediet mentioned this issue Mar 9, 2023
Closed
2 tasks
@xloc
Copy link

xloc commented Dec 20, 2023

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

image

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
Copy link
Member

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

@xloc
Copy link

xloc commented Dec 22, 2023 •
edited
Loading

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
image

@alexdima
Copy link
Member

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

@xloc
Copy link

xloc commented Dec 22, 2023

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
Copy link
Member

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.

@lonely-lockley lonely-lockley mentioned this issue Jan 21, 2024
Closed
@misha-erm
Copy link

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
Copy link

Issue seems to persist in 0.47.0. Any updates?

@ckbedwell ckbedwell mentioned this issue Apr 30, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alexdima alexdima

Labels
bug Issue identified by VS Code Team member as probable bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@hediet @alexdima @KurtGokhan @misha-erm @xloc @mifopen @promeris