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

TheRealSeber commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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

TheRealSeber commented 1 week ago

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 commented 1 week ago

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

huntabyte / bits-ui