Closed
Description
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