Skip to content

Incorrect context submenu position caused by transform ancestor #133595

@crimx

Description

@crimx

Does this issue occur when all extensions are disabled?: Yes/No

Yes

  • VS Code Version: 1.60.1
  • OS Version: web

The issue occurs when trying to intergrate VSCode (or Monaco) into a transform parent element.

Steps to Reproduce:

  1. body.web {
    position: fixed; /* prevent bounce effect */
    }

    Replace the body.web {} with:
    body.web {
      position: absolute;
      left: 0;
      top: 0;
      will-change: transform;
      transform: translate(100px, 100px);
    }
  2. Run yarn watch and yarn web.
  3. Right click the editor and move the mouse to a context menu item with submenu.
  4. The submenu is in incorrect position.
    image

Reason:

This is because transform ancestor behaves as the containing block of fixed descendants.

Here is the code that causes the issue:

this.submenuContainer.style.left = `${left}px`;
this.submenuContainer.style.top = `${top}px`;

A PR has been made for this issue.

Metadata

Metadata

Assignees

Labels

bugIssue identified by VS Code Team member as probable bugmenusMenu items and widget issuesverifiedVerification succeeded

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions