fix: fix jarring positioning when a closed component is first opened

src/components/popover/popover.stories.ts

@@ -1,6 +1,6 @@
 import { select, number, text } from "@storybook/addon-knobs";
 import { html } from "../../../support/formatting";
-import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { boolean, createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
 import { placements } from "../../utils/floating-ui";
 import readme from "./readme.md";
 import { defaultPopoverPlacement } from "../popover/resources";
@@ -101,3 +101,30 @@ export const flipPlacements_TestOnly = (): string => html`
     document.querySelector(".my-popover").flipPlacements = ["right"];
   </script>
 `;
+
+export const correctInitialPosition_TestOnly = stepStory(
+  (): string => html`
+    <calcite-panel>
+      <button id="popover-button">Ref</button>
+      <calcite-popover
+        id="popover"
+        label="Example label"
+        reference-element="popover-button"
+        overlay-positioning="fixed"
+      >
+        <p style="padding:0 10px;display:flex;flex-direction:row">Floating</p>
+      </calcite-popover>
+    </calcite-panel>
+  `,
+  createSteps("calcite-popover")
+    .executeScript(
+      // we hijack styling to ensure initial positioning is captured in the screenshot
+      `
+        const popover = document.querySelector("calcite-popover");
+        popover.style = "border: 1px solid red";
+        popover.setAttribute("calcite-hydrated");
+        popover.removeAttribute("calcite-hydrated-hidden");
+    `
+    )
+    .snapshot("correct initial position")
+);

src/utils/floating-ui.ts

@@ -380,6 +380,9 @@ export function connectFloatingUI(
 
   disconnectFloatingUI(component, referenceEl, floatingEl);
 
+  // ensure position matches for initial positioning
+  floatingEl.style.position = component.overlayPositioning;
+
   cleanupMap.set(
     component,
     autoUpdate(referenceEl, floatingEl, () => {