Scale transition conflicts with the translate transform

[hornta]

I'm having problems implementing a transition for my popover component that uses CSS transform with scale because it overrides the translate property. Currently what I've achieved is this but the problem is that the transition styles overrides the transform position from floating-ui itself.

The transitions works(apart from the transform origin) but the position is lost.

import {
  useMergeRefs,
  FloatingPortal,
  FloatingFocusManager,
  useTransitionStyles,
} from "@floating-ui/react";
import { HTMLProps, forwardRef } from "react";
import { usePopoverContext } from "./PopoverContext.ts";

export const PopoverContent = forwardRef<
  HTMLDivElement,
  HTMLProps<HTMLDivElement>
>(function PopoverContent({ style, ...props }, propRef) {
  const { context: floatingContext, ...context } = usePopoverContext();
  const ref = useMergeRefs([context.refs.setFloating, propRef]);

  const { styles: transitionStyles, isMounted } = useTransitionStyles(
    floatingContext,
    {
      duration: 100,
      initial: {
        opacity: 0,
        transform: "scale(0)",
      },
      open: {
        opacity: 1,
        transform: "scale(1)",
      },
    },
  );

  if (!isMounted) {
    return null;
  }

  return (
    <FloatingPortal>
      <FloatingFocusManager context={floatingContext} modal={context.modal}>
        <div
          ref={ref}
          style={{ ...context.floatingStyles, ...transitionStyles, ...style }}
          aria-labelledby={context.labelId}
          aria-describedby={context.descriptionId}
          {...context.getFloatingProps(props)}
        >
          {props.children}
        </div>
      </FloatingFocusManager>
    </FloatingPortal>
  );
});

[atomiks]

Under Positioning styled customization, it mentions using a wrapper to avoid style conflicts. The root node is for positioning while the inner wrapper can be used for transform animations:

If you’d like to retain transform styles while allowing transform animations, create a wrapper, where the outermost node is the positioned one, and the inner is the actual styled element