fix(#3450): use manual positioning since polyfill isnt working

Author: willcodeforcoffee

libs/web-components/src/components/popover/Popover.svelte

@@ -67,6 +67,8 @@
   // Private
   let _rootEl: HTMLElement;
   let _popoverEl: HTMLElement;
+  const _needsPositionPolyfill = typeof document !== "undefined" && !("anchorName" in document.documentElement.style);
+  let _positionRafId: number | null = null;
 
   // Reactive
   let _targetEl: HTMLElement;
@@ -119,23 +121,62 @@
     showDeprecationWarnings();
     addGlobalCloseListener();
     window.addEventListener("resize", updateAutoPosition);
-    mountAnchorPositioningPolyfill();
   });
 
   onDestroy(() => {
+    stopManualPositioning();
     window.removeEventListener("resize", updateAutoPosition);
     // true was passed when the listener was added, so it's necesary to be passed here as well
     window.removeEventListener("popstate", handleUrlChange, true);
   });
 
   // Functions
 
-  function mountAnchorPositioningPolyfill() {
-    if (window.ANCHOR_POSITIONING_POLYFILL) {
-      const oldRoots = window.ANCHOR_POSITIONING_POLYFILL?.roots || [];
-      window.ANCHOR_POSITIONING_POLYFILL({
-        roots: [...oldRoots, _popoverEl.shadowRoot],
-      });
+  function updatePopoverPosition() {
+    if (!_isOpen || !_targetEl || !_popoverEl) return;
+
+    const targetRect = _targetEl.getBoundingClientRect();
+    const xOffset = hoffset ? parseFloat(hoffset) : 0;
+    const yOffset = voffset ? parseFloat(voffset) : 3;
+
+    // Recalculate auto position based on current viewport space
+    if (position === "auto") {
+      const popoverRect = _popoverEl.getBoundingClientRect();
+      const spaceAbove = targetRect.top;
+      const spaceBelow = window.innerHeight - targetRect.bottom;
+
+      _autoPosition =
+        spaceBelow < popoverRect.height && spaceAbove > spaceBelow
+          ? "above"
+          : "below";
+    }
+
+    const isAbove = position === "above" || (position === "auto" && _autoPosition === "above");
+
+    if (isAbove) {
+      _popoverEl.style.top = `${targetRect.top - yOffset}px`;
+      _popoverEl.style.left = `${targetRect.left + xOffset}px`;
+      _popoverEl.style.transform = "translateY(-100%)";
+    } else {
+      _popoverEl.style.top = `${targetRect.bottom + yOffset}px`;
+      _popoverEl.style.left = `${targetRect.left + xOffset}px`;
+      _popoverEl.style.transform = "";
+    }
+  }
+
+  function startManualPositioning() {
+    if (!_needsPositionPolyfill) return;
+    const loop = () => {
+      updatePopoverPosition();
+      _positionRafId = requestAnimationFrame(loop);
+    };
+    _positionRafId = requestAnimationFrame(loop);
+  }
+
+  function stopManualPositioning() {
+    if (_positionRafId !== null) {
+      cancelAnimationFrame(_positionRafId);
+      _positionRafId = null;
     }
   }
 
@@ -215,7 +256,9 @@
     if (_isOpen) {
       dispatch(_rootEl, "_open");
       requestAnimationFrame(updateAutoPosition); // same vs await tick(), make sure popover element is fully rendered before we measure its dimension
+      startManualPositioning();
     } else {
+      stopManualPositioning();
       _targetEl.focus();
       dispatch(_rootEl, "_close");
     }
@@ -359,24 +402,29 @@
     filter: var(--goa-popover-shadow, none);
     border: var(--goa-popover-border, none);
     margin: 0;
-
-    position-anchor: --goa-popover-target;
-    inset-block-start: anchor(bottom);
-    inset-inline-start: anchor(left);
-    --popover-translate-x: var(--offset-left, 0);
-    --popover-translate-y: var(--offset-top, 3px);
-    translate: var(--popover-translate-x) var(--popover-translate-y);
+    inset: auto;
   }
 
-  .popover-content.position-above {
-    inset-block-start: anchor(top);
-    --popover-translate-y: calc(-100% - var(--offset-bottom, 3px));
-    position-try-fallbacks: none;
-  }
+  @supports (anchor-name: --a) {
+    .popover-content {
+      position-anchor: --goa-popover-target;
+      inset-block-start: anchor(bottom);
+      inset-inline-start: anchor(left);
+      --popover-translate-x: var(--offset-left, 0);
+      --popover-translate-y: var(--offset-top, 3px);
+      translate: var(--popover-translate-x) var(--popover-translate-y);
+    }
+
+    .popover-content.position-above {
+      inset-block-start: anchor(top);
+      --popover-translate-y: calc(-100% - var(--offset-bottom, 3px));
+      position-try-fallbacks: none;
+    }
 
-  .popover-content.position-below {
-    inset-block-start: anchor(bottom);
-    --popover-translate-y: var(--offset-top, 3px);
+    .popover-content.position-below {
+      inset-block-start: anchor(bottom);
+      --popover-translate-y: var(--offset-top, 3px);
+    }
   }
 
   :global(::slotted(ul)) {

libs/web-components/vite.config.js

@@ -92,10 +92,6 @@ export default defineConfig(({ mode }) => {
       },
       rollupOptions: {
         output: {
-          intro: `if (!("anchorName" in document.documentElement.style)) {
-    import("https://unpkg.com/@oddbird/css-anchor-positioning");
-  }
-`,
           assetFileNames: (info) => {
             if (info.name === "style.css") {
               return "index.css";