bug: opacity hover state not being reset in chrome 95

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

In ios mode only -

if there is an IonButton inside an IonItem w/ IonInput, hovering over the button seems to cause the hover state to lock on hovered and then when you click in the input, it appears to cause the button hover state to toggle back and forth until you click outside the input.

md mode does not exhibit this behavior

https://user-images.githubusercontent.com/14936212/144510287-13411231-d11e-4fcc-ac71-40cda5fc7595.mov

Expected Behavior

Expected behavior is hovering over button should functino as expected - hover on when over, hover off when outside; there should be no interacting with input having focus/flashing cursor

Steps to Reproduce

In attached github repo, simply fire up the demo and hover over the button - you should see it go to hover state but then not return if you then click into the input, you should see the button styles flash between hover and not.

Code Reproduction URL

https://github.com/babycourageous/ionic-input-with-icon-button-bug

Ionic Info

Ionic:

Ionic CLI : 6.17.1 Ionic Framework : @ionic/react 5.9.1

Capacitor:

Capacitor CLI : 3.3.2 @capacitor/android : not installed @capacitor/core : 3.3.2 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v14.17.6 npm : 6.14.15 OS : macOS Big Sur

Additional Information

No response

[liamdebeasi]

No problem, I have updated the issue title.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.