flexibleConnectedTo with overlayX: center Got changed 'left' in 'cdk-overlay-connected-position-bounding-box' container when scroll down to the page.

[shawnhuang2015]

Bug, feature request, or proposal:

Bug.

The "cdk-overlay-connected-position-bounding-box" div, style left changes with the scroll top, when ovelayX: center;

const positionStrategy = this.overlay .position() .flexibleConnectedTo(host) .withPush(true) .withDefaultOffsetX(0) .withPositions([ { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: this.offsetY }, { originX: 'center', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -1 * this.offsetY } ]);

What is the expected behavior?

"cdk-overlay-connected-position-bounding-box" div's left should be correct for horizontally center.

What is the current behavior?

"cdk-overlay-connected-position-bounding-box" div dismissed after scrolling down a certain page, since a large offset of style 'left'

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

Bug fixing

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

"@angular/cdk": "^6.0.0",
"@angular/core": "^6.0.5",
"@angular/material": "^6.0.0",
"typescript": "~2.7.2",
Chrome 67
IOS 11,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36'

Is there anything else we should know?

I just did upgrade the project from angular 5 to angular 6.

[piernik]

I have the same problem

[Phil147]

I also ran into this issue and debugged my way through the demo application.

I created a stackblitz to replicate the issue: https://stackblitz.com/edit/angular-material2-issue-t8rqhe
And here is a gif showing the problem:

What are the steps to reproduce?

Basic Steps:

• scroll down until the overlay can just fit below the trigger
• open overlay
• scroll page further and see how the overlay is moving

Extreme case:

• set the spacer height to some large number like 5000
• scroll down and open the overlay
• inspecting the page you can see that the bounding rect has a very large left and height value

What have I found

I debugged my way through the demo app and found these parts which I think are responsible for this bug:
https://github.com/angular/material2/blob/master/src/cdk/overlay/position/flexible-connected-position-strategy.ts#L979-L997
The viewport rect here is calculated by using the viewports' scroll position resulting in large top and bottom values depending on the scroll position.
Later on it is used here:
https://github.com/angular/material2/blob/master/src/cdk/overlay/position/flexible-connected-position-strategy.ts#L725-L730
Especially this line

const smallestDistanceToViewportEdge =
          Math.min(viewport.right - origin.x, origin.x - viewport.top);

where origin.x - viewport.top will get lower and lower depending on the scrolling position.

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

Angular: ^6.0.0
Material: 6.4.7
Browsers: Tried it in Chrome, Firefox and Safari

As I see @crisbeto is already assigned maybe this helps and I am curious if you already have a fix for this issue?

Best Regards
Philipp

[Phil147]

HI @vivian-hu @crisbeto
is there any chance this fix is ported into the 6.x versions? Can't find it in any release yet.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}