[Bug Report][3.0.0] v-overlay positioning of large overlays is poor and inconsistent

[tve]

Environment

Vuetify Version: 3.0.0-beta.5 Vue Version: 3.2.0 Browsers: Chrome 102.0.5005.149 OS: Linux x86_64

Steps to reproduce

1. open codepen
2. shrink window so overlay doesn't fit vertically (see images)
3. open panel 1 or panel 2 and observe positioning
4. the problem is inconsistent (race condition?) so alternate between:

• open one panel or the other
• repeat opening the same panel
• resize the window, especially shrinking it
• shrink window while a panel is open

Expected Behavior

1. the panel should always be attached
2. the button to open/close the panel should always show
3. the total page size should extend and become scrollable when the panel extends below the bottom
4. alternatively, the content of the panel should become scrollable (V2 had the allow-overflow property)

Actual Behavior

• overlay shows up in different inconsistent places
• overlay covers button
• neither overlay nor page become scrollable

Reproduction Link

https://codepen.io/codesurfr/pen/QWmvPYr

Other comments

For my use case I'd really like the overlay to be attached to the bottom of the activator and the page to extend to fit the overlay (and the page to become scrollable, if necessary).

Sample screen shots of what I'm seeing, these screen shots are scaled 50% for this ticket:

• expected positioning when page is large enough to fit overlay:

• expected positioning but cannot access the bottom of the panel by scrolling

• clicked on panel 2 button, position is pretty random

• clicked on panel 1 button, random position

• clicked on panel 2 button, random position

• clicked again 2x on panel 2 button from previous screen shot (nothing else changed), panel partially obscures activator and overlay width got shrunk for no good reason as can been from text wrapping (in my real app it is often shrunk dramatically)

[KaelWD]

It works fine with v-menu funnily enough, there must be some extra css that basic overlays are missing.

[tve]

I updated the codepen to v3.0.0 release, the problem still exists. Also, codepen shows a warning "ResizeObserver loop limit exceeded".

[johnleider]

This is much better on the latest version, but it does seem to break sometimes. When I used the activator slot I wasn't able to reproduce the issue:

https://play.vuetifyjs.com/#eNrtVE1v2zAM/SuciyEbUNtJi12CtOhuO+62Q92DItOJUn1BUtIGQf77SCVt7LQbhh2H+RBYj+Tj46Pi+13x1ftqs8ZiWswSGq9FwtvGAsw2pfA+v+ZDck7PRTgCBLVqA1KLGG+aoi07jc+wWsekum0ZvZBYzjE9IdqmgJi2GintSbVpOYXJePyxKW4PPAAvjLmN22DQYnvCALSTIilny5gCqVtsiUk6a1EmbJvivVTKmLuUnBmGXVALxcHkfD/yOlQW8WIDXAiZ1EYkF6hkBz44H6fwCn7nM+xpkn756RnMNU8W6FfZlriGFETghUUNk1mdE08e14OV9OikCC1Ip7O0i44eMX4jhFd0K5fORQRhQRmxwOmsZvQscVMqsyB9XeajVAtXxAfTR2S38w6DpLdlSuRBXcvW8q3hba9iJZ2pM3usvQhCa/FcG1IdlNDVyi+ovB5OQIPyCD2QoePy++g/cCP+cPtX59v/fwMYO2nl+PArRKqNUL3/CyXgcyo7hbqlYYxrUZNmE/sCmOe1jA+H79zAajpGGZRPEDGtOayMdyHBDgJ2sIcuOAMjMmDEyXT5YgJqAzcc/zT6hlo7+OGCbj+MPjP5gY6IisviwEUifLWKztK3d8dammOA7sQUMsIY9eDzyfm19Y+L7PgdxeqwtkkZLFtn7q6r62pcCu2XovpC1sXUD1cYTTkP7ilioMZNcdnrwYv8VZ9jmOgn1WRy4D1ipRbzyMRvCGvqQtssA9oWA4bfDnGW+94gZylvhuHW+8buyV+t7GM8s1bGbOv9i8K/mDJTcP0Dt9lfFgOV1PdQWTz8BA7KR0g=

[MatheusNascimentoti99]

I updated the codepen to v3.0.0 release, the problem still exists. Also, codepen shows a warning "ResizeObserver loop limit exceeded".

I faced this problem in my project too. My problem it's with VTooltip. This happens when i try to open more than one Tooltip

[johnleider]

This behavior was fixed in https://vuetifyjs.com/en/getting-started/release-notes/?version=v3.4.11

https://play.vuetifyjs.com/#eNrtVE2P2jAQ/StTrypaqSGwbS+IReqtx956aHowziSY+kv2kAUh/nvHgYVk28OeV+tDZL+ZeX7zEf86ihRV+S2EabdDsRBLQhuMJFxVDmDZFTKEftsfyHuzlvECMFTrDpSRKT1Uoi4ag3vY7hLp5lCkIBUWa6RHRFcJSHQwyG6PuqbNAuaz2ftKrM48AE+M/TW+w2jk4YYBGK8kae+KRJHVtQdmUt45VIR1Jf7nyh5rT+Tt2OyjbnU2kg9DyzWpXsRTGeBOKtKdJB855Agh+pAWcAV/5DOcOJNh+G2N8lqTA/5qVzPXmIIJgnRoYL4se8dbjctRSwZ0SsYalDe9tLuGl5z9IyS3aKU23icE6UBb2eJiWWb0mWNXaNuyvqbnY1cH98wHiz+Yq933MCrebYi4BmWpapenJnd7m6bK27JnT2WQURoj96Vl1VFLM92GlsPLcQacaE5hAGbo0vwh+gom4oXdv3/e/bcJyNhNa7aPXyFWbaUe/C/sgHsqGo2m5mSsr9GwZpuGAjLPNSwfzu/cqNR8TCrqQJCQdtmsbfCR4AgRGzhBE72FCRdgkp15+BIBXwMP2f5h8h2N8fDTR1O/m3zM5Gc6JhKnT+Lz9Mt0/lVcNnPx+y/b1aw3