help(mat-menu): Issue related to position strategy on window/page scroll.

What are you trying to do?

Note: Entire UI block i am using inside the iframe tag. I am implementing a Calendar view and each date is like a MS Excel Cell. Each date cell on right click opens a mat-menu. When we have large column the Calendar breaks into multiple sections. Each section will have a scroll of it own. When we have a single section, mat-menu position works fine. But when we have multiple sections, browser by default adds page scroll. When the user uses window/page scroll to see the below sections, the position of mat menu changes as per the window/page scroll position, which shouldn't happen. i.e. if i scroll for 50px in window/page scroll, the mat-menu position appears 50px below its intended position.

What troubleshooting steps have you tried?

The logic is added as provided in https://netbasal.com/context-menus-made-easy-with-angular-cdk-963797e679fc In Template:

<div  (contextmenu)="rightClick(usertype, rightClickMenu, userdata, $event)"> </div>
<div #usertype></div>

  openContextMenu(origin, menu, viewContainerRef: ViewContainerRef, data, overlayPosition?) {
    let position;
    if (overlayPosition) {
      position = overlayPosition;
    } else {
      position = {
        originX: 'end',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'bottom',
      };
    }
    this.closeContextMenu(null);
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(origin)
      .withFlexibleDimensions(false)
      .withPositions([
        position
      ]);
    this.overlayRef = this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.block()
    });
    this.overlayRef.attach(new TemplatePortal(menu, viewContainerRef, {
      $implicit: data, close: this.closeContextMenu
    }));
    this.sub = fromEvent<MouseEvent>(document, 'click')
      .pipe(
        filter(event => {
          const clickTarget = event.target as HTMLElement;
          return (
            clickTarget !== origin &&
            (!!this.overlayRef &&
              !this.overlayRef.overlayElement.contains(clickTarget))
          );
        }),
        take(1)
      )
      .subscribe(() => {
        this.closeContextMenu(null);
      });

    return this.onClosed.pipe(take(1));
  }

Reproduction

The issue is similar to https://github.com/angular/components/issues/16009(Horizontal scrolling issue). Example of horizontal issue https://stackblitz.com/edit/angular-cnldxy.

Am facing similar issue in vertical scrolling scenario. As happening in example test menu1.

Environment

• Angular: "@angular/core": "^6.1.10",
• CDK/Material: "@angular/cdk": "^6.4.7", "@angular/material": "^6.4.7",
• Browser(s): All (Chrome, IE11, Firefox)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows