[Bug Report][3.4.0] Underlined variant textfield with autofocus set has an animation that interferes with another animation of my page

[cadilhac]

Environment

Vuetify Version: 3.4.0 Vue Version: 3.3.8 Browsers: Chrome 119.0.0.0 OS: Windows 10

Steps to reproduce

Hit several times the "visible" switch. You will see that I animate a blue panel that comes from the right and overlays the whole page. This panel has a textfield with variant set to underlined. Then, set the "autofocus" switch to on. This adds the autofocus attribute to the textfield. Click the "visible" switch again. You will see that the blue panel will slide too much to the left and its next sibling will appear on the right (another sliding panel that I have on my web page). For the purpose of the demo, I added v-if to the textfield to force its animation and my animation to run at the same time. In my website in production, the textfield is actually part of a component that appears in its router-view when a route changes.

Expected Behavior

Both animations should work normally. Actually, it works fine in Firefox only.

Actual Behavior

Textfield animation disturbs sliding panel animation in chromium based browsers.

Reproduction Link

https://play.vuetifyjs.com/#...