[Bug Report][2.5.0] Tooltip transition is not working in production

Environment

Vuetify Version: 2.5.0 Vue Version: 2.6.12 Browsers: Chrome 90.0.4430.212 OS: Windows 10

Steps to reproduce

• Trigger tooltip transition in production

Expected Behavior

Tooltip transition to work properly in production

Actual Behavior

Tooltip transition is not working properly in production (see details below)

Reproduction Link

Link to the app repo that has this problem:

https://github.com/aleksey-hoffman/sigma-file-manager

The video below demonstrates the tooltip transition behavior:

Top window is production build (does not work properly):

• ❌ There’s a tooltip close-delay on both icons
• ❌ The fade animation is not working at all on both icons

Bottom window is dev build (does work properly):

• ✅ There’s no tooltip close-delay on both icons, as expected
• ✅ The fade animation is working properly on both icons, as expected

Notes:

• The top icon uses transition-fade tooltip transition and has open-delay.

<v-tooltip transition="fade-transition" open-delay="200">

The bottom one uses the default tooltip transition

https://user-images.githubusercontent.com/61761672/120922558-8e6ef400-c6d2-11eb-8716-7bbcd09d2886.mp4

[KaelWD]

I wonder why it’s behaving differently in the production build

https://github.com/webpack/webpack/issues/7094

[aleksey-hoffman]

@KaelWD oh, wow. I cannot believe how quickly you found the problem. I removed the line and re-built the app, and It was indeed caused by the specified CSS line. I wonder why it’s behaving differently in the production build, perhaps something to do with CSS properties order or webpack optimizations.

Thank you very much for the help mate! The app will now look even more beautiful, thanks to you