diff --git a/litmus/features/dropdown/IFramePortal.js b/litmus/features/dropdown/IFramePortal.js
new file mode 100644
index 000000000..d732c1c14
--- /dev/null
+++ b/litmus/features/dropdown/IFramePortal.js
@@ -0,0 +1,57 @@
+import { createPortal } from "react-dom";
+import { useEffect, useRef, useState } from "react";
+
+function copyStyles(sourceDoc, targetDoc) {
+  Array.from(sourceDoc.styleSheets).forEach((styleSheet) => {
+    try {
+      if (styleSheet.href) {
+        let link = targetDoc.createElement("link");
+        link.rel = "stylesheet";
+        link.href = styleSheet.href;
+        targetDoc.head.appendChild(link);
+      } else if (styleSheet.ownerNode && styleSheet.ownerNode.textContent) {
+        // dev builds inject theme/widget CSS as inline <style> tags (style-loader),
+        // which have no .href, so clone the tag's contents instead
+        let style = targetDoc.createElement("style");
+        style.textContent = styleSheet.ownerNode.textContent;
+        targetDoc.head.appendChild(style);
+      }
+    } catch (err) {
+      console.warn("IFramePortal: could not copy stylesheet", err);
+    }
+  });
+}
+
+// Renders `children` inside a same-origin iframe via a React portal, while the
+// <iframe> element itself stays a normal sibling in the outer document's DOM/layout.
+// Single React tree, single JS realm - only the DOM output is split across two
+// documents. This mirrors iframe-based style isolation helpers (e.g. react-frame-component).
+export const IFramePortal = ({ children, style }) => {
+  let iframeRef = useRef(null);
+  let [containerEl, setContainerEl] = useState(null);
+
+  useEffect(() => {
+    let iframeEl = iframeRef.current;
+
+    function handleLoad() {
+      let doc = iframeEl.contentDocument;
+      doc.body.style.margin = "0";
+      let container = doc.createElement("div");
+      doc.body.appendChild(container);
+      copyStyles(document, doc);
+      setContainerEl(container);
+    }
+
+    if (iframeEl.contentDocument.readyState === "complete") handleLoad();
+    else iframeEl.addEventListener("load", handleLoad);
+
+    return () => iframeEl.removeEventListener("load", handleLoad);
+  }, []);
+
+  return (
+    <div>
+      <iframe ref={iframeRef} style={style} />
+      {containerEl && createPortal(children, containerEl)}
+    </div>
+  );
+};
diff --git a/litmus/features/dropdown/context-menu-iframe-focus.js b/litmus/features/dropdown/context-menu-iframe-focus.js
new file mode 100644
index 000000000..4a9974fa4
--- /dev/null
+++ b/litmus/features/dropdown/context-menu-iframe-focus.js
@@ -0,0 +1,57 @@
+import { openContextMenu } from "cx/widgets";
+import { Controller } from "cx/ui";
+import { IFramePortal } from "./IFramePortal";
+
+// Bug repro: ContextMenu has dismissOnFocusOut enabled by default. Its content
+// below embeds a same-origin iframe (via IFramePortal) with a focusable text
+// input. Right-click the box to open the menu, then click inside the
+// iframe's input field - the menu should stay open, since focus never
+// actually left the menu.
+//
+// Before the fix: the outer document's `document.activeElement` only ever
+// reports the <iframe> element itself as focused, and Node.contains() cannot
+// see across the document boundary into the iframe's own document, so
+// FocusManager treated this as focus leaving the menu entirely and dismissed
+// it immediately.
+
+class PageController extends Controller {}
+
+export default (
+  <cx>
+    <div
+      controller={PageController}
+      style="font-family: sans-serif; padding: 16px; display: flex; flexDirection: column;"
+    >
+      <p style="max-width: 480px; margin: 0 0 16px;">
+        Right-click the box below to open a ContextMenu, then click inside the
+        embedded iframe's text input. The menu should remain open while
+        that field has focus.
+      </p>
+      <div
+        onContextMenu={(e, instance) =>
+          openContextMenu(
+            e,
+            <cx>
+              <div style="padding: 8px;">
+                <div style="margin-bottom: 8px;">
+                  Menu content with an embedded iframe:
+                </div>
+                <IFramePortal
+                  style={{ width: "260px", height: "90px", border: "1px solid #999" }}
+                >
+                  <div style="padding: 8px; font-family: sans-serif;">
+                    <input type="text" placeholder="Focus me" style="width: 100%;" />
+                  </div>
+                </IFramePortal>
+              </div>
+            </cx>,
+            instance,
+          )
+        }
+        style="padding: 40px; border: 1px dashed #999; width: 300px; text-align: center;"
+      >
+        Right Click Here
+      </div>
+    </div>
+  </cx>
+);
diff --git a/litmus/features/dropdown/lookup-inside-iframe-portal.js b/litmus/features/dropdown/lookup-inside-iframe-portal.js
new file mode 100644
index 000000000..258b86d35
--- /dev/null
+++ b/litmus/features/dropdown/lookup-inside-iframe-portal.js
@@ -0,0 +1,100 @@
+import { Controller, LabelsTopLayout } from "cx/ui";
+import { LookupField } from "cx/widgets";
+import { IFramePortal } from "./IFramePortal";
+import "./style.scss";
+
+// Bug repro: a LookupField's dropdown is expected to open right next to the field.
+// Here the field is rendered inside an <iframe> (via a React portal - single JS
+// realm/React tree, DOM split across two documents), and the iframe itself is
+// offset from the parent document's top-left corner. Opening the dropdown shows
+// it positioned away from the field, roughly shifted by the iframe's own
+// left/top offset within the parent document.
+
+class PageController extends Controller {
+  onInit() {
+    this.store.init("city", 1);
+    this.store.init("cities", [
+      { id: 1, text: "New York" },
+      { id: 2, text: "London" },
+      { id: 3, text: "Paris" },
+      { id: 4, text: "Berlin" },
+      { id: 5, text: "Tokyo" },
+      { id: 6, text: "Sydney" },
+      { id: 7, text: "Toronto" },
+      { id: 8, text: "Madrid" },
+    ]);
+  }
+}
+
+export default (
+  <cx>
+    <div
+      style="font-family: sans-serif; display: flex; flexDirection: column;"
+      controller={PageController}
+    >
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        Bug repro: The LookupField below is portaled inside an iframe that is
+        offset from the top-left corner of the parent document. Open the
+        dropdown — it should appear directly above or below the field, but
+        instead it is positioned incorrectly elsewhere on the page.
+      </p>
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        Setting inline=false on the inner lookup would fix the dropdown
+        positioning, but it would prevent the dropdown from being isolated from
+        the parent document's stylesheets. Isolating the stylesheets is the
+        purpose of IFramePortal, so this is not a suitable workaround.
+      </p>
+
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        IFramePortal copies every outer stylesheet into the iframe document (see
+        copyStyles), so both rules below - the red base rule and the more
+        specific blue ".inner-lookup" override - are present inside the iframe.
+        The lookup rendered inline (actually inside the iframe DOM, nested under
+        ".inner-lookup") matches the blue override. The lookup with
+        dropdownOptions inline false portals its dropdown out to the parent
+        document's body instead, outside the ".inner-lookup" ancestor, so it
+        only matches the red base rule and is not isolated from the parent
+        document at all.
+      </p>
+      <LabelsTopLayout>
+        <LookupField
+          label="Parent Document Lookup"
+          value-bind="city"
+          options-bind="cities"
+          placeholder="Select a city..."
+        />
+      </LabelsTopLayout>
+
+      <IFramePortal
+        style={{
+          width: "1000px",
+          height: "600px",
+          marginLeft: "300px",
+          border: "2px solid #c0392b",
+        }}
+      >
+        <div style="padding: 40px;">
+          <LabelsTopLayout>
+            <LookupField
+              class="inner-lookup"
+              label="IFrame Portal Lookup"
+              value-bind="city"
+              options-bind="cities"
+              placeholder="Select a city..."
+              dropdownOptions={{
+                inline: false,
+              }}
+            />
+            <LookupField
+              class="inner-lookup"
+              label="IFrame Portal Lookup (inline)"
+              value-bind="city"
+              options-bind="cities"
+              placeholder="Select a city..."
+            />
+          </LabelsTopLayout>
+        </div>
+      </IFramePortal>
+    </div>
+  </cx>
+);
diff --git a/litmus/features/dropdown/lookup-inside-real-iframe.js b/litmus/features/dropdown/lookup-inside-real-iframe.js
new file mode 100644
index 000000000..cb86eb229
--- /dev/null
+++ b/litmus/features/dropdown/lookup-inside-real-iframe.js
@@ -0,0 +1,78 @@
+import { Controller, LabelsTopLayout } from "cx/ui";
+import { LookupField } from "cx/widgets";
+
+const isEmbedded = window.self !== window.top;
+
+class PageController extends Controller {
+  onInit() {
+    this.store.init("city", 1);
+    this.store.init("cities", [
+      { id: 1, text: "New York" },
+      { id: 2, text: "London" },
+      { id: 3, text: "Paris" },
+      { id: 4, text: "Berlin" },
+      { id: 5, text: "Tokyo" },
+      { id: 6, text: "Sydney" },
+      { id: 7, text: "Toronto" },
+      { id: 8, text: "Madrid" },
+    ]);
+  }
+}
+
+const LookupInFrame = (
+  <cx>
+    <div
+      style="padding: 40px; font-family: sans-serif;"
+      controller={PageController}
+    >
+      <LabelsTopLayout>
+        <LookupField
+          label="Real IFrame Lookup"
+          value-bind="city"
+          options-bind="cities"
+          placeholder="Select a city..."
+        />
+      </LabelsTopLayout>
+    </div>
+  </cx>
+);
+
+const HostPage = (
+  <cx>
+    <div
+      style="font-family: sans-serif; display: flex; flexDirection: column;"
+      controller={PageController}
+    >
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        Bug repro (real iframe): the LookupField in the framed page below runs
+        as a fully independent app in its own iframe document/window (a genuine
+        navigation via iframe src, not a React portal). Open its dropdown and
+        check whether it's positioned correctly relative to the field.
+      </p>
+      <p style="max-width: 420px; margin: 0 0 16px;">
+        This also doubles as a repro for a related viewport-size bug: the
+        framed field has very little content compared to the iframe's 600px
+        height, and the framed page doesn't set html/body height to 100%
+        (the default). If the dropdown ever measures the fixed-position
+        viewport off the framed document's content height instead of its
+        actual (much taller) viewport, it will think there's no room below
+        the field and open upward instead of downward.
+      </p>
+      <LabelsTopLayout>
+        <LookupField
+          label="Parent Document Lookup"
+          value-bind="city"
+          options-bind="cities"
+          placeholder="Select a city..."
+        />
+      </LabelsTopLayout>
+
+      <iframe
+        src={window.location.href}
+        style="width: 1000px; height: 600px; margin-left: 300px; border: 2px solid #2980b9;"
+      />
+    </div>
+  </cx>
+);
+
+export default isEmbedded ? LookupInFrame : HostPage;
diff --git a/litmus/features/dropdown/style.scss b/litmus/features/dropdown/style.scss
new file mode 100644
index 000000000..bd525beda
--- /dev/null
+++ b/litmus/features/dropdown/style.scss
@@ -0,0 +1,9 @@
+.cxe-lookupfield-dropdown {
+   background: red;
+}
+
+.inner-lookup {
+   .cxe-lookupfield-dropdown {
+      background: blue;
+   }
+}
diff --git a/litmus/index.js b/litmus/index.js
index eb81a6ec2..eadadfe6e 100644
--- a/litmus/index.js
+++ b/litmus/index.js
@@ -140,7 +140,10 @@ import "./index.scss";
 // import Demo from "./features/charts/PointReducer";
 // import Demo from "./features/charts/line-graph/LineGraph";
 // import Demo from "./features/charts/line-graph/SmoothingOvershoot";
-import Demo from "./features/window/resize-cursor";
+//import Demo from "./features/window/resize-cursor";
+import Demo from "./features/dropdown/lookup-inside-iframe-portal";
+// import Demo from "./features/dropdown/lookup-inside-real-iframe";
+// import Demo from "./features/dropdown/context-menu-iframe-focus";
 // import Demo from "./bugs/GridDefaultSortFieldClearableSortIssue";
 // import Demo from "./bugs/GridFixedColumnsFixedHeaderColumnsPosition";
 // import Demo from "./bugs/GridOnFetchRecords";
diff --git a/packages/cx/src/util/DOM.ts b/packages/cx/src/util/DOM.ts
index 80e6acbcb..30ab59228 100644
--- a/packages/cx/src/util/DOM.ts
+++ b/packages/cx/src/util/DOM.ts
@@ -1,4 +1,5 @@
 import { isNumber } from "../util/isNumber";
+import { getActiveElement } from "./getActiveElement";
 
 type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
 
@@ -51,11 +52,11 @@ export function closestParent(el: Element, condition: (el: any) => boolean): HTM
 }
 
 export function isFocused(el: Element): boolean {
-   return document.activeElement == el;
+   return getActiveElement() == el;
 }
 
 export function isFocusedDeep(el: Element): boolean {
-   return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
+   return isSelfOrDescendant(el, getActiveElement());
 }
 
 const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
@@ -76,13 +77,23 @@ export function isFocusable(el: Element): el is HTMLElement {
  * @returns {Element}
  */
 export function getFocusedElement(): Element | null {
-   return document.activeElement;
+   return getActiveElement();
 }
 
 export function isDescendant(el: Element, descEl: Element): boolean {
    return el.contains(descEl);
 }
 
+//`descEl` may live in a different document than `el` (e.g. focus is inside a same-origin
+//iframe) - Node.contains never crosses document boundaries, so walk out through each
+//frame's <iframe> element in its parent document until we either cross into el's document
+//or run out of ancestor frames.
 export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
-   return el == descEl || el.contains(descEl);
+   let node: Element | null | undefined = descEl;
+   while (node) {
+      if (el == node || el.contains(node)) return true;
+      let win: Window | null = node.ownerDocument?.defaultView;
+      node = win?.frameElement;
+   }
+   return false;
 }
diff --git a/packages/cx/src/util/getActiveElement.ts b/packages/cx/src/util/getActiveElement.ts
index 83781e78d..03a617644 100644
--- a/packages/cx/src/util/getActiveElement.ts
+++ b/packages/cx/src/util/getActiveElement.ts
@@ -1,4 +1,18 @@
 //IE sometimes returns null while other browsers always return document.body.
-export function getActiveElement(): Element {
-   return document.activeElement ?? document.body;
+export function getActiveElement(doc: Document = document): Element {
+  let active = doc.activeElement ?? doc.body;
+
+  //when focus is inside a same-origin iframe, `doc.activeElement` only reports the
+  //<iframe> element itself - drill into its own document to find the element that's
+  //actually focused there (recursively, in case of nested iframes)
+  if (active && active.tagName === "IFRAME") {
+    const iframe = active as HTMLIFrameElement;
+    let frameDoc = iframe.contentDocument;
+    if (frameDoc) {
+      const inner = getActiveElement(frameDoc);
+      return inner ?? active;
+    }
+  }
+
+  return active;
 }
diff --git a/packages/cx/src/widgets/nav/MenuItem.tsx b/packages/cx/src/widgets/nav/MenuItem.tsx
index bbc55d28e..90805bf87 100644
--- a/packages/cx/src/widgets/nav/MenuItem.tsx
+++ b/packages/cx/src/widgets/nav/MenuItem.tsx
@@ -385,7 +385,7 @@ class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemC
          debug(menuFlag, "MenuItem", "mouseLeave", this.el);
          this.clearAutoFocusTimer();
 
-         if (widget.hoverToOpen && document.activeElement == this.el) unfocusElement(this.el!);
+         if (widget.hoverToOpen && getActiveElement() == this.el) unfocusElement(this.el!);
       }
 
       tooltipMouseLeave(e, this.props.instance, widget.tooltip);
@@ -486,7 +486,7 @@ class MenuItemComponent extends VDOM.Component<MenuItemComponentProps, MenuItemC
       let { widget } = this.props.instance;
       if (widget.dropdown) {
          oneFocusOut(this, this.el!, this.onFocusOut.bind(this));
-         debug(menuFlag, "MenuItem", "focus", this.el, document.activeElement);
+         debug(menuFlag, "MenuItem", "focus", this.el, getActiveElement());
          this.clearAutoFocusTimer();
          if (widget.openOnFocus) this.openDropdown();
       }
diff --git a/packages/cx/src/widgets/overlay/Dropdown.tsx b/packages/cx/src/widgets/overlay/Dropdown.tsx
index a41d1dba7..62f5f87da 100644
--- a/packages/cx/src/widgets/overlay/Dropdown.tsx
+++ b/packages/cx/src/widgets/overlay/Dropdown.tsx
@@ -5,6 +5,7 @@ import { Widget, VDOM } from "../../ui/Widget";
 import { calculateNaturalElementHeight } from "../../util/calculateNaturalElementHeight";
 import { closestParent, findFirst, isFocusable } from "../../util/DOM";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
 import { isTouchDevice } from "../../util/isTouchDevice";
 import {
   ConfigureOverlayContainerContext,
@@ -224,6 +225,23 @@ export class DropdownBase<
       component.updateDropdownPosition,
     );
 
+    //if the related element lives in a different document (e.g. inside a same-origin
+    //iframe), that document/window has its own scroll position and its own resize event
+    //(which also fires when the <iframe> element itself is resized) - neither is observed
+    //by the top-level `window` above or by the relatedElement's parentElement chain, so
+    //track every frame window between the related element's document and the top document.
+    var frameWindows: Window[] = (component.frameWindows = []);
+    var frameWin: Window | null | undefined =
+      instance.relatedElement?.ownerDocument?.defaultView;
+    while (frameWin && frameWin !== window) {
+      frameWindows.push(frameWin);
+      frameWin = frameWin.frameElement?.ownerDocument?.defaultView;
+    }
+    frameWindows.forEach((w) => {
+      w.addEventListener("scroll", component.updateDropdownPosition);
+      w.addEventListener("resize", component.updateDropdownPosition);
+    });
+
     if (this.onDropdownDidMount)
       instance.invoke("onDropdownDidMount", instance, component);
 
@@ -246,14 +264,21 @@ export class DropdownBase<
   }
 
   overlayWillUnmount(instance: InstanceType, component: any): void {
-    var { scrollableParents } = component;
+    var { scrollableParents, frameWindows } = component;
     if (scrollableParents) {
       scrollableParents.forEach((el: Element) => {
         el.removeEventListener("scroll", component.updateDropdownPosition);
       });
       delete component.scrollableParents;
-      delete component.updateDropdownPosition;
     }
+    if (frameWindows) {
+      frameWindows.forEach((w: Window) => {
+        w.removeEventListener("scroll", component.updateDropdownPosition);
+        w.removeEventListener("resize", component.updateDropdownPosition);
+      });
+      delete component.frameWindows;
+    }
+    delete component.updateDropdownPosition;
     if (component.offResize) component.offResize();
 
     if (this.pipeValidateDropdownPosition)
@@ -278,7 +303,17 @@ export class DropdownBase<
   updateDropdownPosition(instance: InstanceType, component: any): void {
     var { el, initialScreenPosition } = component;
     var { data, relatedElement } = instance;
-    var parentBounds = getTopLevelBoundingClientRect(relatedElement!);
+    var elDocument: Document = el.ownerDocument || document;
+
+    //if the dropdown renders in the same document as its related element (e.g. not
+    //portaled to the top-level body, such as an inline dropdown living inside an
+    //iframe together with its field), no cross-document offset should be applied -
+    //getBoundingClientRect() is already relative to that shared document/viewport.
+    var isSameDocument =
+      el && relatedElement && el.ownerDocument === relatedElement.ownerDocument;
+    var parentBounds = isSameDocument
+      ? relatedElement!.getBoundingClientRect()
+      : getTopLevelBoundingClientRect(relatedElement!);
 
     //getBoundingClientRect() will return an empty rect if the element is hidden or removed
     if (
@@ -291,19 +326,33 @@ export class DropdownBase<
       parentBounds = component.parentBounds;
     } else component.parentBounds = parentBounds;
 
-    if (this.trackMouseX && instance.mousePosition) {
+    //instance.mousePosition (set from getCursorPos) is always expressed in top-document
+    //coordinates. When the dropdown and its related element share a document that isn't
+    //the top document (e.g. both live inside the same iframe), parentBounds above is in
+    //that document's own coordinate space, so the mouse position must be translated into
+    //the same space before it can replace part of parentBounds.
+    var mousePosition = instance.mousePosition;
+    if (mousePosition && isSameDocument && elDocument !== document) {
+      const frameOffset = getParentFrameBoundingClientRect(relatedElement!);
+      mousePosition = {
+        x: mousePosition.x - frameOffset.left,
+        y: mousePosition.y - frameOffset.top,
+      };
+    }
+
+    if (this.trackMouseX && mousePosition) {
       parentBounds = new DOMRect(
-        instance.mousePosition.x,
+        mousePosition.x,
         parentBounds.top,
         0,
         parentBounds.bottom - parentBounds.top,
       );
     }
 
-    if (this.trackMouseY && instance.mousePosition) {
+    if (this.trackMouseY && mousePosition) {
       parentBounds = new DOMRect(
         parentBounds.left,
-        instance.mousePosition.y,
+        mousePosition.y,
         parentBounds.right - parentBounds.left,
         0,
       );
@@ -334,6 +383,7 @@ export class DropdownBase<
       parentBounds,
       data.placement,
       component.lastPlacement,
+      elDocument,
     );
 
     var arrowAdjust = this.getArrowAdjust(component);
@@ -346,6 +396,7 @@ export class DropdownBase<
       el,
       false,
       arrowAdjust,
+      elDocument,
     );
     component.setCustomStyle(style);
     this.setDirectionClass(component, placement);
@@ -366,6 +417,7 @@ export class DropdownBase<
           el,
           true,
           arrowAdjust,
+          elDocument,
         );
         component.setCustomStyle(newStyle);
       }
@@ -412,8 +464,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    let viewport = getViewportRect(this.screenPadding);
+    let viewport = getViewportRect(this.screenPadding, elDocument);
     style.position = "fixed";
 
     if (placement.startsWith("down")) {
@@ -431,7 +484,7 @@ export class DropdownBase<
           ? Math.max(this.screenPadding, top) + "px"
           : "auto";
       style.bottom =
-        document.documentElement.offsetHeight -
+        elDocument.documentElement.clientHeight -
         (this.cover ? rel.bottom : rel.top) +
         this.offset +
         "px";
@@ -450,7 +503,7 @@ export class DropdownBase<
         break;
 
       case "down-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -466,7 +519,7 @@ export class DropdownBase<
         break;
 
       case "up-left":
-        style.right = `${document.documentElement.offsetWidth - rel.right - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.right - arrowAdjust}px`;
         style.left = "auto";
         break;
 
@@ -488,45 +541,45 @@ export class DropdownBase<
       case "right-up":
         style.top = "auto";
         style.right = "auto";
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.bottom = `${elDocument.documentElement.clientHeight - rel.bottom - arrowAdjust}px`;
         style.left = `${rel.right + this.offset}px`;
         break;
 
       case "left":
       case "left-center":
         style.top = `${Math.round((rel.top + rel.bottom - el.offsetHeight) / 2)}px`;
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
         break;
 
       case "left-down":
         style.top = `${rel.top - arrowAdjust}px`;
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
         style.bottom = "auto";
         style.left = "auto";
         break;
 
       case "left-up":
         style.top = "auto";
-        style.right = `${document.documentElement.offsetWidth - rel.left + this.offset}px`;
-        style.bottom = `${document.documentElement.offsetHeight - rel.bottom - arrowAdjust}px`;
+        style.right = `${elDocument.documentElement.clientWidth - rel.left + this.offset}px`;
+        style.bottom = `${elDocument.documentElement.clientHeight - rel.bottom - arrowAdjust}px`;
         style.left = "auto";
         break;
 
       case "screen-center":
         let w = Math.min(
           contentSize.width,
-          document.documentElement.offsetWidth - 2 * this.screenPadding,
+          elDocument.documentElement.clientWidth - 2 * this.screenPadding,
         );
         let h = Math.min(
           contentSize.height,
-          document.documentElement.offsetHeight - 2 * this.screenPadding,
+          elDocument.documentElement.clientHeight - 2 * this.screenPadding,
         );
-        style.top = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-        style.right = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
-        style.bottom = `${Math.round((document.documentElement.offsetHeight - h) / 2)}px`;
-        style.left = `${Math.round((document.documentElement.offsetWidth - w) / 2)}px`;
+        style.top = `${Math.round((elDocument.documentElement.clientHeight - h) / 2)}px`;
+        style.right = `${Math.round((elDocument.documentElement.clientWidth - w) / 2)}px`;
+        style.bottom = `${Math.round((elDocument.documentElement.clientHeight - h) / 2)}px`;
+        style.left = `${Math.round((elDocument.documentElement.clientWidth - w) / 2)}px`;
         break;
     }
   }
@@ -539,8 +592,9 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
-    var viewport = getViewportRect(this.screenPadding);
+    var viewport = getViewportRect(this.screenPadding, elDocument);
 
     style.position = "absolute";
 
@@ -647,6 +701,7 @@ export class DropdownBase<
     el: HTMLElement,
     noAuto: boolean,
     arrowAdjust: number = 0,
+    elDocument: Document,
   ): void {
     switch (this.positioning) {
       case "absolute":
@@ -658,6 +713,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
 
@@ -671,6 +727,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         else
           this.applyFixedPositioningPlacementStyles(
@@ -681,6 +738,7 @@ export class DropdownBase<
             el,
             noAuto,
             arrowAdjust,
+            elDocument,
           );
         break;
 
@@ -693,6 +751,7 @@ export class DropdownBase<
           el,
           noAuto,
           arrowAdjust,
+          elDocument,
         );
         break;
     }
@@ -749,13 +808,14 @@ export class DropdownBase<
     target: any,
     placement: string,
     lastPlacement: any,
+    elDocument: Document,
   ): any {
     var placementOrder = this.placementOrder.split(" ");
     var best = lastPlacement || placement;
     var first;
 
     var score: Record<string, number> = {};
-    var viewport = getViewportRect();
+    var viewport = getViewportRect(0, elDocument);
 
     for (var i = 0; i < placementOrder.length; i++) {
       var p = placementOrder[i];
@@ -970,11 +1030,11 @@ export class Dropdown extends DropdownBase<DropdownConfig, DropdownInstance> {}
 Widget.alias("dropdown", Dropdown);
 Localization.registerPrototype("cx/widgets/Dropdown", Dropdown);
 
-function getViewportRect(padding = 0) {
+function getViewportRect(padding = 0, elDocument: Document = document) {
   return {
     left: padding,
     top: padding,
-    right: document.documentElement.offsetWidth - padding,
-    bottom: document.documentElement.offsetHeight - padding,
+    right: elDocument.documentElement.clientWidth - padding,
+    bottom: elDocument.documentElement.clientHeight - padding,
   };
 }
diff --git a/packages/cx/src/widgets/overlay/Window.tsx b/packages/cx/src/widgets/overlay/Window.tsx
index 183840be4..db6dbdc35 100644
--- a/packages/cx/src/widgets/overlay/Window.tsx
+++ b/packages/cx/src/widgets/overlay/Window.tsx
@@ -21,6 +21,7 @@ import { isDefined } from "../../util/isDefined";
 import { isString } from "../../util/isString";
 import { BooleanProp, StringProp, StyleProp, ClassProp } from "../../ui/Prop";
 import { RenderingContext } from "../../ui/RenderingContext";
+import { getActiveElement } from "src/util";
 
 export interface WindowConfig extends OverlayConfig {
    /** Text to be displayed in the header. */
@@ -292,7 +293,7 @@ class WindowComponent extends OverlayComponent<WindowComponentProps, WindowCompo
    onFocusIn() {
       super.onFocusIn();
       if (!this.state.active) {
-         if (this.containerEl?.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+         if (this.containerEl?.contains(getActiveElement())) this.setZIndex(ZIndexManager.next());
          this.setState({ active: true });
       }
    }