fix(cdk/overlay): sub-pixel deviations throwing off positioning in some cases

If the browser is zoomed in beyond the default level, it may report numbers with
sub-pixel deviations to `getBoundingClientRect` (e.g. 100.09 vs 100) which can throw off
our logic when comparing against the viewport size which is always a whole number.

These changes fix the issue by rounding down the numbers that we get from `getBoundingClientRect`.

Fixes #21350.

Author: crisbeto

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

@@ -1,8 +1,8 @@
 import {ComponentPortal, PortalModule} from '@angular/cdk/portal';
 import {CdkScrollable, ScrollingModule, ViewportRuler} from '@angular/cdk/scrolling';
-import {MockNgZone} from '@angular/cdk/testing/private';
+import {dispatchFakeEvent, MockNgZone} from '@angular/cdk/testing/private';
 import {Component, ElementRef, NgModule, NgZone} from '@angular/core';
-import {inject, TestBed} from '@angular/core/testing';
+import {fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
 import {Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {
@@ -2194,7 +2194,51 @@ describe('FlexibleConnectedPositionStrategy', () => {
         expect(Math.floor(overlayRect.width)).toBe(rightOffset);
       });
 
+    it('should account for sub-pixel deviations in the size of the overlay', fakeAsync(() => {
+      originElement.style.top = '200px';
+      originElement.style.left = '200px';
+
+      positionStrategy
+        .withFlexibleDimensions()
+        .withPositions([{
+          originX: 'start',
+          originY: 'bottom',
+          overlayX: 'start',
+          overlayY: 'top'
+        }]);
+
+      attachOverlay({
+        positionStrategy,
+        height: '100%'
+      });
 
+      const originalGetBoundingClientRect = overlayRef.overlayElement.getBoundingClientRect;
+
+      // The browser may return a `ClientRect` with sub-pixel deviations if the screen is zoomed in.
+      // Since there's no way for us to zoom in the screen programmatically, we simulate the effect
+      // by patching `getBoundingClientRect` to return a slightly different value.
+      overlayRef.overlayElement.getBoundingClientRect = function() {
+        const clientRect = originalGetBoundingClientRect.apply(this);
+        const zoomOffset = 0.1;
+
+        return {
+          top: clientRect.top,
+          right: clientRect.right + zoomOffset,
+          bottom: clientRect.bottom + zoomOffset,
+          left: clientRect.left,
+          width: clientRect.width + zoomOffset,
+          height: clientRect.height + zoomOffset
+        } as any;
+      };
+
+      // Trigger a resize so that the overlay get repositioned from scratch
+      // and to have it use the patched `getBoundingClientRect`.
+      dispatchFakeEvent(window, 'resize');
+      tick(100); // The resize listener is usually debounced.
+
+      const overlayRect = originalGetBoundingClientRect.apply(overlayRef.overlayElement);
+      expect(Math.floor(overlayRect.top)).toBe(0);
+    }));
 
   });
 

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

@@ -206,7 +206,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // We use the viewport rect to determine whether a position would go off-screen.
     this._viewportRect = this._getNarrowedViewportRect();
     this._originRect = this._getOriginRect();
-    this._overlayRect = this._pane.getBoundingClientRect();
+    this._overlayRect = getRoundedBoundingClientRect(this._pane);
 
     const originRect = this._originRect;
     const overlayRect = this._overlayRect;
@@ -345,7 +345,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   reapplyLastPosition(): void {
     if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
       this._originRect = this._getOriginRect();
-      this._overlayRect = this._pane.getBoundingClientRect();
+      this._overlayRect = getRoundedBoundingClientRect(this._pane);
       this._viewportRect = this._getNarrowedViewportRect();
 
       const lastPosition = this._lastPosition || this._preferredPositions[0];
@@ -931,8 +931,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       overlayPoint = this._pushOverlayOnScreen(overlayPoint, this._overlayRect, scrollPosition);
     }
 
-    let virtualKeyboardOffset =
-        this._overlayContainer.getContainerElement().getBoundingClientRect().top;
+    const virtualKeyboardOffset =
+        getRoundedBoundingClientRect(this._overlayContainer.getContainerElement()).top;
 
     // Normally this would be zero, however when the overlay is attached to an input (e.g. in an
     // autocomplete), mobile browsers will shift everything in order to put the input in the middle
@@ -998,13 +998,13 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _getScrollVisibility(): ScrollingVisibility {
     // Note: needs fresh rects since the position could've changed.
     const originBounds = this._getOriginRect();
-    const overlayBounds =  this._pane.getBoundingClientRect();
+    const overlayBounds =  getRoundedBoundingClientRect(this._pane);
 
     // TODO(jelbourn): instead of needing all of the client rects for these scrolling containers
     // every time, we should be able to use the scrollTop of the containers if the size of those
     // containers hasn't changed.
     const scrollContainerBounds = this._scrollables.map(scrollable => {
-      return scrollable.getElementRef().nativeElement.getBoundingClientRect();
+      return getRoundedBoundingClientRect(scrollable.getElementRef().nativeElement);
     });
 
     return {
@@ -1109,12 +1109,12 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     const origin = this._origin;
 
     if (origin instanceof ElementRef) {
-      return origin.nativeElement.getBoundingClientRect();
+      return getRoundedBoundingClientRect(origin.nativeElement);
     }
 
     // Check for Element so SVG elements are also supported.
     if (origin instanceof Element) {
-      return origin.getBoundingClientRect();
+      return getRoundedBoundingClientRect(origin);
     }
 
     const width = origin.width || 0;
@@ -1219,3 +1219,22 @@ function getPixelValue(input: number|string|null|undefined): number|null {
 
   return input || null;
 }
+
+/**
+ * Gets a version of an element's bounding `ClientRect` where all the values are rounded down to
+ * the nearest pixel. This allows us to account for the cases where there may be sub-pixel
+ * deviations in the `ClientRect` returned by the browser (e.g. when zoomed in with a percentage
+ * size, see #21350).
+ */
+function getRoundedBoundingClientRect(element: Element): ClientRect {
+  const clientRect = element.getBoundingClientRect();
+
+  return {
+    top: Math.round(clientRect.top),
+    right: Math.round(clientRect.right),
+    bottom: Math.round(clientRect.bottom),
+    left: Math.round(clientRect.left),
+    width: Math.round(clientRect.width),
+    height: Math.round(clientRect.height)
+  };
+}