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

[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:

While on RTL the flipping using scale move it a bit:

What's missing is translate to fix the offset translateX(-5px):

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

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}