bug: hover styling activates when it shouldn't on some Android devices

Bug Report

Ionic version: [x] 4.5.0

Current behavior: After clicking button hover background doesn’t disappear, it disappears only when you click away

Expected behavior: When you click button background should appear and disappear

Steps to reproduce:

1. checkout https://github.com/JustasKuizinas/ionic-blank
2. npm i
3. ionic server
4. open app in mobile device
5. click one of the grey icons on the top right and button hover won’t disappear

Related code: https://github.com/JustasKuizinas/ionic-blank

Other information: I think it happens because of this(https://github.com/ionic-team/ionic/blob/master/core/src/components/button/button.scss):

@media (any-hover: hover) {
  :host(:hover) .button-native {
    background: var(--background-hover);
    color: var(--color-hover);
  }

I think this bug was introduced here in this commit https://github.com/ionic-team/ionic/commit/5c5934bc24bde387fe66e16f88158d992c71dcc9#diff-7c58c82ca091ee01c6244994d0362292

Also, I think it’s bad practise to use :hover pseudo selector on mobile devices, because on mobile devices :hover works a bit different than on desktop.

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.2 (C:\Users\Justas\AppData\Roaming\npm\node_modu
les\ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webvie
w 4.1.0, (and 5 other plugins)

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.5

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[evangunawan]

actually i solved it by changing the hover property to transparent. I don’t know if this the best way or not, but at least it works for me. Try to add this in your page scss: ion-button { --background-hover:transparent !important; }

[haroon407]

I am having the same issue, any idea when can this be fixed as adding css classes seems like a workaround rather than a good solution