next: forceMount affects site performance when using in non-static sites.

[TheRealSeber]

Describe the bug

Lately I reported this. However the forceMount fix massively affects the performance of the site when using the transition with multiple elements containing tooltips. The FPS are very very low, when there are a lot of such tooltips. The lag can be also achieved by just moving the devTools bar in my Chrome

I am developing https://medwave.app/app. You can see that there are some sort of sections and for example after navitigating mouse on clipboard there are tooltips (w/o forceMount and transistion). The app runs on 1.0.0-next.33. There are no performance issues and no transistions for the tooltips

After updating the bits-ui version to 1.0.0-next.34 locally and modifying tooltip element as described in the issue I mentioned, before the accordion is very laggy and the site is not smooth at all when clicking the accordion. Below I attach screenshot of the performance benchmark when clicking accordion on my site locally (it's simillary low FPS when just moving the devTools bar). On average I have ~21 FPS

E.g.

It totally blocks using a lot of tooltips across sites which are not "static" and where the elements of site happens to move in any way.

Reproduction

-

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 1.04 GB / 13.87 GB
  Binaries:
    Node: 22.4.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (128.0.2739.54)
    Internet Explorer: 11.0.22621.3527

Severity

blocking all usage of bits-ui

[huntabyte]

I need to see a reproduction of this lag so I can debug. All we're doing in forceMount is exposing a way for you to use Svelte Transitions. There isn't anything performance-intensive going on, actually less than without using forceMount as we defer the presence detection to Svelte.

Do you experience the same lag with CSS transitions/animations (without using Svelte's)?

[huntabyte]

If you can publish a version of the site where this lag occurs I can look into it further as well.

[TheRealSeber]

Do you experience the same lag with CSS transitions/animations (without using Svelte's)?

Yes

If you can publish a version of the site where this lag occurs I can look into it further as well.

I will publish it somwhere under our domain in the following minutes and leave a link here. If I don't succeed, expect it tomorrow :)

[TheRealSeber]

I've identified the cause of the FPS drops. The issue stems from forceMounting the tooltip, which keeps it constantly present in the HTML DOM. As a result, whenever elements containing tooltips are moved, the tooltip’s position is recalculated on every frame. This behavior causes substantial performance hits, especially during transitions or animations where multiple elements with tooltip move in each frame, triggering position recalculations for numerous tooltips.

In cases where many elements are moving simultaneously (Personally I find it getting laggy with ~20+ moving elements upon a time), the JavaScript engine can become overwhelmed by these constant recalculations. Introducing a mechanism, such as a flag to prevent tooltip position recalculations during transitions, could help mitigate this performance bottleneck?

Below video of the tooltip style recalculations during the "parent" element move

https://github.com/user-attachments/assets/d3502f77-1b54-4fe0-97db-a4c8b1ea0eaa

[TheRealSeber]

Hey @huntabyte, sorry for pinging, although I am just checking whether you have seen my last reply, as the issue still have a not enought info and waiting for author tags

[huntabyte]

Would you mind providing a link to a live preview with this behavior so I can properly debug?

[TheRealSeber]

Would you mind providing a link to a live preview with this behavior so I can properly debug?

Next week, too much assignments rn in the uni.