fix(cdk/overlay): safari workaround not working with popovers (#32588)

We had a workaround for Safari's zooming behavior in the CDK overaly, but it had stopped working when we switched to popovers because it relies on measuring the overlay container. These changes fix the issue by making the overlay container visible temporarily so it can be measured.

Fixes #32583.

(cherry picked from commit 136841e)

Author: crisbeto

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

@@ -253,7 +253,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     this._viewportRect = this._getNarrowedViewportRect();
     this._originRect = this._getOriginRect();
     this._overlayRect = this._pane.getBoundingClientRect();
-    this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
+    this._containerRect = this._getContainerRect();
 
     const originRect = this._originRect;
     const overlayRect = this._overlayRect;
@@ -401,10 +401,11 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       this._originRect = this._getOriginRect();
       this._overlayRect = this._pane.getBoundingClientRect();
       this._viewportRect = this._getNarrowedViewportRect();
-      this._containerRect = this._overlayContainer.getContainerElement().getBoundingClientRect();
-
-      const originPoint = this._getOriginPoint(this._originRect, this._containerRect, lastPosition);
-      this._applyPosition(lastPosition, originPoint);
+      this._containerRect = this._getContainerRect();
+      this._applyPosition(
+        lastPosition,
+        this._getOriginPoint(this._originRect, this._containerRect, lastPosition),
+      );
     } else {
       this.apply();
     }
@@ -1296,6 +1297,29 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       width,
     };
   }
+
+  /** Gets the dimensions of the overlay container. */
+  private _getContainerRect(): Dimensions {
+    // We have some CSS that hides the overlay container when it's empty. This can happen
+    // when a popover-based overlay is open and it hasn't been inserted into the overlay
+    // container. If that's the case, make the container temporarily visible so that we
+    // can measure it. This information is used to work around some issues in Safari.
+    const isInlinePopover =
+      this._overlayRef.getConfig().usePopover && this._popoverLocation !== 'global';
+    const element = this._overlayContainer.getContainerElement();
+
+    if (isInlinePopover) {
+      element.style.display = 'block';
+    }
+
+    const dimensions = element.getBoundingClientRect();
+
+    if (isInlinePopover) {
+      element.style.display = '';
+    }
+
+    return dimensions;
+  }
 }
 
 /** A simple (x, y) coordinate. */