The popover element sometimes has random position

[pan-alexey]

Provide a general summary of the issue here

We use the usePopover hook and the visual testing tool Playwright in conjunction with Storybook. We have noticed a large number of flapping tests related to the popover component, where the position of components may vary slightly. The screenshot shows an example of this behavior.

🤔 Expected Behavior?

The position of the popover element is always the same

😯 Current Behavior

The popover element sometimes has a offset.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

const Popover = (
  props: {
    children: ReactNode;
    state: OverlayTriggerState;
  } & Omit<AriaPopoverProps, "popoverRef">,
) => {
  const popoverContainer = usePopoverContainer();

  const ref = useRef<HTMLDivElement>(null);
  const { state, children } = props;
  const { popoverProps, underlayProps } = usePopover(
    {
      ...props,
      popoverRef: ref,
    },
    state,
  );

  const overlayProps = useLayoutOverlayPosition({
    ...props,
    overlayRef: ref,
    targetRef: props.triggerRef,
  });

  return (
    <Overlay portalContainer={popoverContainer}>
      <div
        {...underlayProps}
        styles={{
          position: "fixed",
        }}
      />
      <div
        {...mergeProps(popoverProps, overlayProps)}
        ref={ref}
      >
          {children}
      </div>
    </Overlay>
  );
};

Version

3.33.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Linux

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Are you able to output the HTML and do a diff?

My current theories would be:

• this could be related to font loading
• could be due to pixel rounding (unlikely if these are the same browser)

[pan-alexey]

While analyzing the problem, it was found that the positioning of the popover depends on connection speed. In this regard, I assume that Playwright and Storybook have a greater affect. I am closing the issues, thank you.