FlexibleConnectonPositionStrategy _pushOverlayOnScreen doesn't take position: fixed into account when the page is scrolled

[jpzwarte]

Bug, feature request, or proposal:

So i have a custom component (a popover) that uses CdkOverlay to display a popover anchored to an origin element. The origin element is part of a position: fixed page-header. What happens is that the overlay initially doesn't fit in the narrowed viewport (doesn't fit on the x-axis). It then tries to push the overlay on screen using _pushOverlayOnScreen. While that fixes the x-axis issue, it also breaks the y-axis position.

Since the page is scrolled, it calculates the overflowTop value using the scroll position and then incorrectly adds that value to the y position. This can cause the popover to appear halfway down the page when the page is scrolled significantly.

What is the expected behavior?

It should detect that the origin (parent) element is position: fixed and not take the scroll position into account?

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

Angular 6.0.3
Cdk 6.2.0

[jpzwarte]

I've added a hack/workaround in my popover component to adjust "top":

positionStrategy.positionChanges.subscribe(change => {
  const origin = this._containerInstance._config.origin,
        originElement = origin instanceof ElementRef ? origin.nativeElement : origin;

  if (getComputedStyle(originElement.offsetParent).position === 'fixed') {
    this._overlayRef.overlayElement.style.top = originElement.offsetParent.clientHeight + 'px';
  }
})

[FDIM]

We are experiencing something similar with v6.3.3 - seems like there is an issue in _pushOverlayOnScreen method that takes top scroll offset into account when it shouldn't.

Also origin element (or any parent) is not using position:fixed in our case.

Stackblitz: https://stackblitz.com/edit/angular-material2-issue-zsdwce?file=app%2Fapp.component.ts

To reproduce the issue:

• open the example in it's own window
• adjust window width so that white box would not fit on the right side of the origin and would be pushed to the left a bit
• scroll to bottom

FYI:

If I add breakpoint before return statement in the image above and change pushY to 0 - position ends up being correct.

EDIT: Added stackblitz example

[jackhkmatthews]

Experiencing the same issue as @FDIM.

[crisbeto]

This has been fixed in the 7.0 beta by #12624.

[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.}