[Bug]: Performance issues with popper content and body scroll lock

[stafyniaksacha]

Environment

Client OS: Windows 11
Browser: Chrome 131

Link to minimal reproduction

https://reka-ui.com/docs/components/dropdown-menu

Steps to reproduce

1. Go to https://reka-ui.com/docs/components/dropdown-menu
2. Open Chrome Devtools
3. Go to performance tab
4. Enable CPU throttling to x4
5. Test to open / close the dropdown (it may take seconds to apply effect)

Describe the bug

Opening and closing the dropdown menu component has latency when using a device with slow CPU (or in power saving mode).

We can see two bottlenecks when the dropdown open:

• 1st Recalculate Style: getBoundingClientRect force a reflow:

  radix-vue/packages/core/src/Popper/PopperContent.vue

  Lines 323 to 329 in 4823c85

  	// update position automatically when `boundingClientRect` changes
  	const throttleUpdate = useThrottleFn(update, 10, true, true)
  	watchEffect(() => {
  	if (reference.value?.getBoundingClientRect()) {
  	throttleUpdate()
  	}
  	})

• 2nd Recalculate Style: getComputedStyle also force a reflow:

  radix-vue/packages/core/src/Popper/PopperContent.vue

  Lines 335 to 339 in 4823c85

  	const contentZIndex = ref('')
  	watchEffect(() => {
  	if (contentElement.value)
  	contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex
  	})

Maybe it's because they are called after styles (overflow, pointer-events, margin and padding on body) has been applied, forcing browser to reflow

Here is the performance trace recorded: https://trace.cafe/t/On8azGJwtH

Expected behavior

Other implementations like melt-ui and shadcn-ui seem to perform better even with higher CPU throttling

Context & Screenshots (if applicable)

No response