Floating UI works as expected in dev mode but not in production mode

[baseplate-admin]

Current Behavior

Here is how floating-ui looks in production mode:

screen-recorder-tue-may-28-2024-10-05-21.webm

Expected Behavior

Here is how it looks in development mode:

screen-recorder-tue-may-28-2024-10-05-04.webm

Steps To Reproduce

This is for dev build:

1. git clone https://github.com/baseplate-admin/coreproject-v4-ui.git
2. cd coreproject-v4-ui
3. npm run dev

This is for production build:

1. git clone https://github.com/baseplate-admin/coreproject-v4-ui.git
2. cd coreproject-v4-ui
3. npm run build:node
4. npm run preview

Link to Reproduction / Stackblitz

https://coreproject-v4-ui.vercel.app/anime

More Information

Relevant codes : https://github.com/baseplate-admin/coreproject-v4-ui/blob/e290baa4cf5c7fc19245450bd9d0860364f2a300/src/routes/anime/%2Bpage.svelte#L447-L493

[baseplate-admin]

Overriding the component like this :

{#if sidebar_tooltips_open[idx]}
<div
    use:portal={"body"}
    bind:this={floating.elements.floating}
    {...intersections.getFloatingProps()}
    style="{floating.floatingStyles};z-index:100000;" <!-- CHECK THE Z-INDEX -->
    transition:blur={{ duration: 300 }}
    class="bg-warning text-secondary md:rounded-[0.5vw] md:px-[0.75vw] md:py-[0.25vw] md:text-[1.1vw]"
>
    {anime.title}
</div>
{/if}

made the tooltip appear but it's in wrong position.

[baseplate-admin]

Hey uh, is there something i can do to move this forward?

[endigo9740]

@Hugos68 have you seen this? Any ideas?

@baseplate-admin Keep in mind Floating UI Svelte is pre-release software and not yet ready for production, so there's no guarantee it'll work in an issue-free manner quite yet. Make sure you're setting your expectations accordingly please. Thanks.

[baseplate-admin]

Keep in mind Floating UI Svelte is pre-release software and not yet ready for production, so there's no guarantee it'll work in an issue-free manner quite yet.

That's why i opened this issue.

Make sure you're setting your expectations accordingly please. Thanks.

That's why i am trying my best to move this forward :)

[Hugos68]

Hey @baseplate-admin, sorry for responding so late, I must have accidentally marked this as read when going through my notifications. Anways, although I definitely appreiciate you filing a bug report, without a minimal reproduction we can't do much. The reproduction you provided is your entire project, we don't have the resources to clone and skim through and entire project to bughunt, we expect some initial efforts from you. Please provide a reproduction in: https://svelte-5-preview.vercel.app/ This ensures 2 things:

1. That the Svelte version is current
2. A consistent environment (node, npm, etc all become irrelevant)

[baseplate-admin]

Hey @Hugos68, i tried to reproduce it in svelte repl but i was unable to do so.

Because in order to create this issue i think the app has to go though svelte-kit build process.

So here's a minimal reproduction repository that uses svelte + tailwind + @floating-ui/svelte + svelte-portal.

Please check this file

---

I must have accidentally marked this as read when going through my notifications.

No worries :) It happens.

The reproduction you provided is your entire project, we don't have the resources to clone and skim through and entire project to bughunt, we expect some initial efforts from you.

Alright. Let me know if i can provide any more assistance. :)

[Hugos68]

So here's a minimal reproduction repository that uses svelte + tailwind + @floating-ui/svelte + svelte-portal.

What are the steps to reproduce the issue? Nevermind, once deployed to Vercel seeing the same issues.

[Hugos68]

@baseplate-admin I managed to fix it when moving to a component: https://floating-ui-issue-128.vercel.app/ Repo: https://github.com/Hugos68/floating-ui-issue-128

I would honestly recommend a component either way. Also, why do you use portal on the floating element? Just curious.

[baseplate-admin]

Thanks a lot for your investigation.

---

I managed to fix it when moving to a component: https://floating-ui-issue-128.vercel.app/ Repo: https://github.com/Hugos68/floating-ui-issue-128

yep, it seems that moving to a component solves the issue. but the underlying problem still exists :(.

Also, why do you use portal on the floating element? Just curious.

This can be better explained by @moonlitgrace

[moonlitgrace]

why do you use portal on the floating element? Just curious.

hi @Hugos68 we've been using floating-ui-svelte inside a ScrollArea with overflow-y-scroll, so its hiding elements overflowing on the x-axis.

<ScrollArea class="overflow-y-scroll">
    <!-- reference element -->
    <!-- floating element -->
</ScrollArea>

even adding z-index didnt work, so we needed to render it outside scroll element (portal it). to body maybe? well please let me know if theres better way to do this.

[endigo9740]

My immediate thought would be to pull the popover itself out of the ScrollArea. If it's hidden on load, it shouldn't matter where it's located. The only issue might be scoping. if that puts it outside of the scope of the useFloating hook in some manner that might cause issues.

[baseplate-admin]

The only issue might be scoping. if that puts it outside of the scope of the useFloating hook in some manner that might cause issues.

But in the minimal reproduction doesn't have any scrollarea. My thought is the when we are using floating-ui in @const tag, vite removes/optimizes some properties that are not tree-shaked, thus we can see it working fine in development mode and the js part is removed in production mode

[Hugos68]

well please let me know if theres better way to do this.

@moonlitgrace You could try strategy: 'fixed' in the useFloating configuration:

useFloating({
    strategy: 'fixed'
});

Apart from that, you will have to wait until we port more components from React, since it would include a built in Portal component for the floating element: https://floating-ui.com/docs/FloatingPortal

[Hugos68]

Marking this as closed as it appears to be an issue with Svelte 5 @const, since it works fine in a normal component.