fix: test if frameElement is readable (#2987)

chrishoyle · web-flow · commit b1d0865c0d74 · 2024-08-01T18:27:37.000+10:00
diff --git a/.changeset/lemon-baboons-search.md b/.changeset/lemon-baboons-search.md
@@ -0,0 +1,6 @@
+---
+"@floating-ui/dom": patch
+"@floating-ui/utils": patch
+---
+
+fix: test if `frameElement` is readable to avoid errors in Safari and MSEdge with cross-origin iframes
diff --git a/packages/dom/src/utils/getBoundingClientRect.ts b/packages/dom/src/utils/getBoundingClientRect.ts
@@ -8,6 +8,7 @@ import {isElement} from '../platform/isElement';
 import {getVisualOffsets, shouldAddVisualOffsets} from './getVisualOffsets';
 import {unwrapElement} from './unwrapElement';
 import type {VirtualElement} from '../types';
+import { getFrameElement } from '@floating-ui/utils/dom';
 
 export function getBoundingClientRect(
   element: Element | VirtualElement,
@@ -50,7 +51,7 @@ export function getBoundingClientRect(
         : offsetParent;
 
     let currentWin = win;
-    let currentIFrame = currentWin.frameElement;
+    let currentIFrame = getFrameElement(currentWin);
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
@@ -72,7 +73,7 @@ export function getBoundingClientRect(
       y += top;
 
       currentWin = getWindow(currentIFrame);
-      currentIFrame = currentWin.frameElement;
+      currentIFrame = getFrameElement(currentWin);
     }
   }
 
diff --git a/packages/utils/src/dom.ts b/packages/utils/src/dom.ts
@@ -178,12 +178,13 @@ export function getOverflowAncestors(
   const win = getWindow(scrollableAncestor);
 
   if (isBody) {
+    const frameElement = getFrameElement(win);
     return list.concat(
       win,
       win.visualViewport || [],
       isOverflowElement(scrollableAncestor) ? scrollableAncestor : [],
-      win.frameElement && traverseIframes
-        ? getOverflowAncestors(win.frameElement)
+      frameElement && traverseIframes
+        ? getOverflowAncestors(frameElement)
         : [],
     );
   }
@@ -193,3 +194,7 @@ export function getOverflowAncestors(
     getOverflowAncestors(scrollableAncestor, [], traverseIframes),
   );
 }
+
+export function getFrameElement(win: Window): Element | null {
+  return Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
