Active item z-index issues

[stamminator]

When animations.Active is set, there are what appear to be z-index and positioning issues with context menus.

My settings are as follows:

"vscode_custom_css.imports": [],
"animations.Install-Method": "Apc Customize UI++",
"apc.imports": [
    "file:///c:/Users/jstamm/.vscode/extensions/brandonkirbyson.vscode-animations-2.0.3/dist/updateHandler.js"
],
"animations.Default-Duration": 175,
"animations.Durations": {
    "Tabs": 250
},
"animations.Tabs": "Flip",
"animations.Scrolling": "None",
"animations.Command-Palette": "Slide",
"animations.Active": "None" /* changes during demo */

[BrandonKirbyson]

Thank you for the issue, I am on macos where the popups are done differently so its tricky to debug. That specific animation's css uses only transform translate which might have some side effect on the positioning of the popup for (windows?).

Are there any other places where there is a similar issue and does the active option Scale work? Thanks.

[stamminator]

@BrandonKirbyson Thanks for the quick response. The Scale option does not displace the popup, but it still has the layering issue.

[BrandonKirbyson]

Ok thanks for checking. Here's two options, first try to put this css into the custom css file, use the command Animations: Open Custom CSS and it should open a css file. Paste this in, it should live update:

.monaco-list-row:not(
    .explorer-folders-view .monaco-list-row,
    .code-cell-row
  ).focused {
  z-index: 1000 !important;
}

That's a little hacky but it might do something, if that doesn't work then try:

.monaco-list-row:not(
    .explorer-folders-view .monaco-list-row,
    .code-cell-row
  ) {
  z-index: 0 !important;
}

If either of those do something, like somewhat fix it or even make it worse then let me know and ignore the rest of this, thanks.

Otherwise could you screenshot the popup element for me since I don't have that popup on a mac. You can get it like this (Sorry if you already know this):

1. Opening inspect element with the command Developer: Toggle Developer Tools
2. Click the top left button in the window, this will allow you to select elements
3. Hover over the popup, here is an example of what it should look like. Try to get the outermost section of the popup please
4. Click when you are hovering over it and on the right panel it should show the element you clicked on.

Then could you screenshot the element like the last picture and send that. Then I can use that to make some fix.

Thanks for the help

[TobinPalmer]

It works well for me on Mac, try on there.