Vertical positioning of flexible connected overlay on mobile

[oschlegel]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Flexible connected overlays are positioned correct even if the user is scrolling

What is the current behavior?

Scrolling affects the vertical positioning of the overlay. The overlay is positioned to low.

What are the steps to reproduce?

Scroll down a page on a mobile device (not to the end of the page, but somewhere in the middle) and then open the flexible connected overlay. The overlay seems to be positioned to low.

Example desktop:

Example mobile:

Configuration of the overlay:

const positionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.elementRef) // <-- elementRef is the icon element from the screenshot
      .withPositions([
        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' }
      ])
      .withPush(false);
    this.overlay.create({
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition()
    });

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

@angular/core: 6.1.0
@angular/material: 6.4.7
@angular/cdk: 7.0.0-rc.1
typescript: 2.7.2

[josephperrott]

Can you provide a reproduction in StackBlitz. This will help us to investigate the issue you are seeing.

[oschlegel]

Thanks for your answer @josephperrott.

I made a example for you: https://stackblitz.com/edit/angular-jh76xz

You have to open the example on a real mobile device. You will find three touchable elements on the page. The first and the last element work as expected, but hen you touch the second element you will see that the position of the opened overlay is not correct

[MitkoTschimev]

Is there any progress?

[oschlegel]

Anything happened here?

[SecilDemirbas]

Bug still exists. Is there any progress on this Bug?

[bramvanoploo]

We are having the exact same issue. Curious to know if there is a workaround or solution in sight?

[ShukinDmitriy]

Hello! I proposed a solution to this problem here #28425

[ShukinDmitriy]

@crisbeto @andrewseguin could you look at mine PR #28425 ?