-
Notifications
You must be signed in to change notification settings - Fork 37.7k
Closed
Labels
bugIssue identified by VS Code Team member as probable bugIssue identified by VS Code Team member as probable bugmenusMenu items and widget issuesMenu items and widget issuesverifiedVerification succeededVerification succeeded
Milestone
Description
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:
vscode/src/vs/workbench/browser/media/style.css
Lines 44 to 46 in 33c149f
body.web { position: fixed; /* prevent bounce effect */ }
Replace thebody.web {}with:body.web { position: absolute; left: 0; top: 0; will-change: transform; transform: translate(100px, 100px); }
- Run
yarn watchandyarn web. - Right click the editor and move the mouse to a context menu item with submenu.
- The submenu is in incorrect position.

Reason:
This is because transform ancestor behaves as the containing block of fixed descendants.
Here is the code that causes the issue:
vscode/src/vs/base/browser/ui/menu/menu.ts
Lines 920 to 921 in 83bd43b
| 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 bugIssue identified by VS Code Team member as probable bugmenusMenu items and widget issuesMenu items and widget issuesverifiedVerification succeededVerification succeeded