mat-menu: In IE, mat-menu-panel with xPosition before and vertical scrollbar shifts to the left and doesn't align correctly

[mbcnl]

Overview

Menus with too many menu items in them will cause the mat-menu-panel with xPosition="before" to shift to the left and not line up correctly with the right edge of the button in IE browser. Consequently, if you add a set max-height to the mat-menu-panel to override the default 100vh calculation, the panel is still shifted to the left in IE.

Bug, feature request, or proposal: Bug

What is the expected behavior?

mat-menu with xPosition="before" shouldn't shift left and should align correctly to the right even if the number of menu items exceed the max-height of panel in IE.

What is the current behavior?

mat-menu with xPosition="before" and menu items that exceed max-height of panel causes the panel to shift to the left and not align with button in IE.

What are the steps to reproduce?

StackBlitz

Add enough items to mat-menu with xPosition="before" until menu panel exceeds max-height.

Screenshot shows correct behavior in FF and Chrome. Incorrect behavior is seen in last screen in IE:

Screenshot shows incorrect behavior in IE when overriding max-height as well:

What is the use-case or motivation for changing an existing behavior?

Menus should display consistently across all browsers for consistent user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Windows
Angular: 7.0.3
Material: 7.0.4
TypeScript: 3.1.6
Browsers: IE only