Dialog causes layout reflow which causes bad performance for large DOM trees

[Mokkapps]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.7.19

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-snttsl

Describe your issue

Actual Behavior

Dialog opens very slow on slow devices (emulated via 6x CPU slowdown via browser DevTools) on a page with many DOM nodes. Performance profiler indicates that a layout reflow is triggered.

Expected Behavior

Dialog opens smoothly on slow devices with many DOM nodes and does not trigger a layout reflow.

[danschalow]

Hi all,

@Mokkapps and I did some further research and found that if we rendered the large amount of DOM nodes outside of the app container, the performance significantly improved.

It seems the offending attributes, which cause the reflow are data-v-app="" aria-hidden="true" inert=""

In the test app, namely:

<div id="app" data-v-app="" aria-hidden="true" inert="">

You can find our minimal test here: https://stackblitz.com/edit/vitejs-vite-qs8kue