Skip to content

bug(mat-menu): RTL svg polygon is using scaleX(-1) but isn't using translate for correct positioning #29599

Closed
@Harpush

Description

@Harpush

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Currently the menu arrow svg polygon in LTR is looking like this:
image
While on RTL the flipping using scale move it a bit:
image
What's missing is translate to fix the offset translateX(-5px):
image

Mostly it isn't very visible - but when the site is using border-box for all elements the arrow gets cut in RTL.

Reproduction

https://stackblitz.com/edit/erkfg5?file=src%2Fexample%2Fmenu-nested-example.ts
The stackblitz added border-box to every element and shows menu in RTL mode.
The RTL mode has the arrow icon cut but when clicking on toggle to LTR mode the icon isn't cut

Expected Behavior

The arrow should be positioned in the same manner for RTL and LTR

Actual Behavior

In RTL the arrow position is a bit off and thus the arrow gets cut

Environment

  • Angular: 18.2.0
  • CDK/Material: 18.2.0
  • Browser(s): chrome 126
  • Operating System (e.g. Windows, macOS, Ubuntu): windows 10

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/menu

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions