From cca24e480c07a2a5b47383ce2808cab3f5a9ac47 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 23 Dec 2025 10:33:02 +0200
Subject: [PATCH] fix(cdk/overlay): safari workaround not working with popovers

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.
---
 .../flexible-connected-position-strategy.ts   | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts
index c3f2ee0e6201..3f1c84631fc6 100644
--- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts
+++ b/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. */