'Angular cdk overlay: viewport margin is not working

I noticed in my app that tooltips created with CDK Overlay doesn't respect viewport margin which I add with method .withViewportMargin()

I created simple reproduction: https://stackblitz.com/edit/viewport-margin-bug?file=src%2Fapp%2Fapp.component.ts

Overlay has been provided with two preferred positions:

  • first opens upward
  • second opens downward

I also added .withViewportMargin(100). Red line shows where margin ends.

Overlay cannot be pushed and shrink:

.withPush(false)
.withFlexibleDimensions(false)

According to this configuration first position should be ignored and overlay should open on second position (downward).

Instead it ignores 100px viewport margin and still opens upward. enter image description here

Can someone explain to me why this occurs?

UPDATE:

I've created an issue in angular material repository:

https://github.com/angular/components/issues/24259



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source