[Bug Report][3.0.0] VSwitch: clicks around the knob are inconsistent

[tve]

Environment

Vuetify Version: 3.0.0-beta.8 Vue Version: 3.2.36 Browsers: Chrome 102.0.5005.149 OS: Linux x86_64

Steps to reproduce

• watch the attached video
• open the codepen
• click the switch to turn it on
• position the cursor on the knob so it will land outside the bar after clicking
• click, watch the switch toggle, observe that the cursor still shows a pointer hand
• click again, nothing happens
• keep clicking and nothing happens, small movements in the cursor change the behavior

Expected Behavior

clicking anywhere on the v-switch element should toggle the switch

Actual Behavior

there are dead zones

Reproduction Link

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

Video: https://youtu.be/ke3ztrdSFjA Apologies for the crappy quality, I'm screen-recording challenged (linux w/wayland mess), you can faintly see the mouse clicks in the ripple on the background of the v-switch element and you can also hear them.

Other comments

I colored some of the areas in the v-switch to try to determine where clicking works and where it doesn't, but it's not conclusive. The problem shows up both in latest vivaldi and latest linux firefox 102.0.1

[johnleider]

I'll ask the same thing here as https://github.com/vuetifyjs/vuetify/issues/15668, what is your use-case for using v-ripple on the input?

[tve]

I updated the codepen to 3.0.0 release abnd also removed the explicit v-ripple. The dead zones remain.

[lioneaglesolutions]

Seems OK to me to be honest...

You can always change z-index on the knob itself which would place it on top of the label and make the ripple visible if that's what this issue is explaining - I'm not 100% sure on the exact problem. @johnleider