Use top/left for positioning Floating UI elements

[chasegiunta]

Is there an option to use top/left attributes to styling position of Popovers, etc instead of transforms? I'm having issues attempting to use Vue's transition components with Tailwind's transform styles when animating in popovers.

I'll post some other related issues:

floating-ui/floating-ui#2893
unovue/radix-vue#712

I think there needs to be an option that adjusts the code here that would opt to use the var(--x) var(--y) values in top/left attributes, rather than within a transform.

[segunadebayo]

How about using the style attribute in your userland code?

transform: unset
top: var(—y)
left: var(—x)

[segunadebayo]

Alternatively, you can apply individual transform properties (scale, translate) directly instead of relying on transform.

[chasegiunta]

That could work, but custom CSS solution is not ideal, IMO. I think I figured out an easier way (for anyone else running across this issue), and that is wrapping Vue's transition component in absolute positioned parent:

<div class="absolute">
  <Transition
    enter-active-class="transition ease-out duration-100"
    enter-from-class="opacity-0 scale-95"
    enter-to-class="opacity-100 scale-100"
    leave-active-class="transition ease-in duration-75"
    leave-from-class="opacity-100 scale-100"
    leave-to-class="opacity-0 scale-95"
  >
    <Popover.Positioner>
      <Popover.Content>
       ...............

Floating UI then correctly calculates the X & Y positions