Skip to content

fix(overlay): incorrect bounding box bottom position when page is scrolled and content is flowing upwards #10463

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 20, 2018
Merged

fix(overlay): incorrect bounding box bottom position when page is scrolled and content is flowing upwards #10463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 34 additions & 4 deletions src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,17 +159,15 @@ describe('FlexibleConnectedPositionStrategy', () => {
// Scroll the page such that the origin element is roughly in the
// center of the visible viewport (2500 - 1024/2, 2500 - 768/2).
document.body.appendChild(veryLargeElement);
document.body.scrollTop = 2100;
document.body.scrollLeft = 2100;
window.scroll(2100, 2100);

originElement.style.top = `${ORIGIN_TOP}px`;
originElement.style.left = `${ORIGIN_LEFT}px`;
});

afterEach(() => {
window.scroll(0, 0);
document.body.removeChild(veryLargeElement);
document.body.scrollTop = 0;
document.body.scrollLeft = 0;
});

// Preconditions are set, now just run the full set of simple position tests.
Expand Down Expand Up @@ -1119,6 +1117,38 @@ describe('FlexibleConnectedPositionStrategy', () => {
expect(Math.floor(overlayRect.height)).toBe(OVERLAY_HEIGHT);
});

it('should calculate the `bottom` value correctly with upward-flowing content ' +
'and a scrolled page', () => {
const veryLargeElement = document.createElement('div');

originElement.style.left = '200px';
originElement.style.top = `200px`;

veryLargeElement.style.width = '100%';
veryLargeElement.style.height = '2000px';
document.body.appendChild(veryLargeElement);
window.scroll(0, 50);

positionStrategy
.withFlexibleHeight()
.withPositions([{
overlayY: 'bottom',
overlayX: 'start',
originY: 'bottom',
originX: 'start'
}]);

attachOverlay({positionStrategy});

const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
const originRect = originElement.getBoundingClientRect();

expect(Math.floor(overlayRect.bottom)).toBe(Math.floor(originRect.bottom));

window.scroll(0, 0);
document.body.removeChild(veryLargeElement);
});

});

describe('onPositionChange with scrollable view properties', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/cdk/overlay/position/flexible-connected-position-strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,8 +557,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
height = viewport.bottom - origin.y;
} else if (position.overlayY === 'bottom') {
// Overlay is opening "upward" and thus is bound by the top viewport edge.
bottom = viewport.bottom - origin.y + this._viewportMargin;
height = origin.y - viewport.top;
bottom = viewport.height - origin.y + this._viewportMargin;
height = viewport.height - bottom;
} else {
// If neither top nor bottom, it means that the overlay
// is vertically centered on the origin point.
Expand Down