@sebgroup/green-core 3.21.1 → 3.21.2-rc.20260904080740058

package/components/popover/popover.component.js

@@ -22,6 +22,10 @@ import { watch, watchMediaQuery } from "../../utils/decorators/index.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import PopoverStyles from "./popover.styles.js";
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
 function applyTriggerAriaAttributes(trigger, open, popupRole) {
   trigger.setAttribute("aria-expanded", String(open));
   const focusableNodeNames = ["A", "BUTTON", "INPUT", "TEXTAREA"];
@@ -259,6 +263,9 @@ let GdsPopover = class extends GdsElement {
       (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
       this._elDialog?.style.removeProperty("left");
       this._elDialog?.style.removeProperty("top");
+      this._elDialog?.style.removeProperty("right");
+      this._elDialog?.style.removeProperty("bottom");
+      this._elDialog?.style.removeProperty("transform");
       this._elDialog?.style.removeProperty("minWidth");
       this._elDialog?.style.removeProperty("min-width");
     } else {
@@ -323,10 +330,18 @@ registerAutoPositioning_fn = function() {
       middleware: this.floatingUIMiddleware,
       strategy: "fixed"
     }).then(
-      ({ x, y }) => Object.assign(floatingEl.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      })
+      ({ x, y }) => (
+        // Positioning via transform rather than left/top keeps the popover on its own
+        // compositing layer, which avoids a stale-paint bug in Safari when the placement
+        // flips while the popover is rendered outside the top layer (nonmodal mode).
+        Object.assign(floatingEl.style, {
+          left: "0",
+          top: "0",
+          right: "auto",
+          bottom: "auto",
+          transform: `translate3d(${roundByDPR(x)}px, ${roundByDPR(y)}px, 0)`
+        })
+      )
     );
   }));
 };