bug(CdkOverlay): CdkOverlay incorrectly calculates viewport bounds

[jerrodrs]

Reproduction

https://stackblitz.com/edit/components-issue-yh1yjm?file=src/app/example-component.ts

Steps to reproduce:

1. Spawn a flexible position based overlay.
2. Make overlay contents height larger than viewport height such that overflow occurs.
3. Make viewport height a floating point number with decimal portion between .0 to .5.
4. The overlay will now overflow out of the viewport bounds.
5. Make the viewport height a floating point number between .5 to next whole number, or a whole number.
6. The overlay will now correctly stay within the viewport bounds.

Notes:
If you just try slowly resizing the window height while the overlay is open, you will see it bounce in and out of the viewport as the window height cycles between bad and good numbers.

Problem is that viewport height is a rounded number, and overlay height is a floating point. Therefore when viewport rounds down, the following check fails.

components/src/cdk/overlay/position/flexible-connected-position-strategy.ts

Line 632 in e436479

if (overlay.height <= viewport.height) {

To compare the two numbers, the rounding needs to be consistent.

Expected Behavior

Flexible dimension overlay should always remain within viewport bounds.

Actual Behavior

Flexible dimension overlay does not remain within viewport bounds when viewport height rounds down.

Environment

• Angular: 10.2.3
• CDK/Material: 10.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

I can imagine how this would happen if one of the numbers was rounded and the other one wasn't, although I'm having a hard time reproducing it with the demo, because I get rounded numbers for both of them. Does it happen for you in the demo, or is it inside an app under specific circumstances?

[mark-westerhof]

It appears to be OS dependant. I've been unable to reproduce it on macOS (chrome), but able to reproduce on windows/linux (chrome).

[crisbeto]

I tested it out against a few different browsers on Windows (Chrome, Firefox, Edge, IE).

[jerrodrs]

I think getBoundingClientRect can return floating point numbers when zooming or scaling.

Both machines I tested this on were high resolution displays with scaling applied. Haven’t verified yet but it sounds likely to be the cause.

It happens 100% of the time in the demo.

EDIT: Confirm it only happens when my resolution has scaling applied.

[crisbeto]

I managed to reproduce it by zooming in one level.