diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
index f754ba49f0ef..7ccff442bc8a 100644
--- a/packages/main/src/Popover.ts
+++ b/packages/main/src/Popover.ts
@@ -464,6 +464,9 @@ class Popover extends Popup {
this.arrowTranslateY = placement!.arrow.y;
top = this._adjustForIOSKeyboard(top);
+ const stackingContextOffset = this._getStackingContextOffset(left, top);
+ left -= stackingContextOffset.left;
+ top -= stackingContextOffset.top;
Object.assign(this.style, {
top: `${top}px`,
@@ -492,6 +495,23 @@ class Popover extends Popup {
return top + (Number.parseInt(this.style.top || "0") - actualTop);
}
+ _getStackingContextOffset(left: number, top: number) {
+ let parentNode = this.parentElement ? this.parentNode as HTMLElement : (this.parentNode as ShadowRoot).host as HTMLElement;
+
+ while (parentNode) {
+ const computedStyle = getComputedStyle(parentNode);
+
+ if (["size", "inline-size"].indexOf(computedStyle.containerType) > -1
+ || computedStyle.transform !== "none") {
+ return parentNode.getBoundingClientRect();
+ }
+
+ parentNode = parentNode.parentElement ? parentNode.parentNode as HTMLElement : (parentNode.parentNode as ShadowRoot).host as HTMLElement;
+ }
+
+ return { left: 0, top: 0 };
+ }
+
getPopoverSize(): PopoverSize {
const rect = this.getBoundingClientRect(),
width = rect.width,
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
index 03c011b2ffd5..1db54e6a3a4e 100644
--- a/packages/main/test/pages/Popover.html
+++ b/packages/main/test/pages/Popover.html
@@ -27,6 +27,37 @@
+
+
+ Open Popover
+
+
+
+
+ Hello
+ World
+ Again
+
+
+
+
+
+ Super Danger !
+
+
+
+ Hello
+ World
+ Again
+
+
+
+
+
+
+
+
+
Click me !
@@ -43,29 +74,9 @@
- Open Popover
-
-
- Hello
- World
- Again
-
-
-
-
- Super Danger !
-
-
-
- Hello
- World
- Again
-
-
-
@@ -395,7 +406,7 @@
Dialog Focus
Header text
-
+