Ionic-framework: bug: critical button hover bug

[JustasKuizinas]

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 ([email protected])
   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

[liamdebeasi]

Hi there,

Thanks for the issue! This code was added to support our desktop users.

@brandyscarney We discussed the Material Design button changes from here https://material.io/design/components/buttons.html.

The behavior on both desktop and mobile when trying that demo is that the hover background color does not go away until clicking/tapping away. It _looks_ like our buttons are behaving correctly according to the MD spec, but can you confirm?

[JustasKuizinas]

@liamdebeasi on mobile you can check latest material buttons design here version 8.0.1, only Basic buttons have that strange sticky hover behavior, other buttons work normal = you press a button, button background appears and disappears.

[liamdebeasi]

I'm seeing all of the buttons with the same behavior. Which "Basic buttons" are you referring to?

[JustasKuizinas]

I'm seeing all of the buttons with the same behavior. Which "Basic buttons" are you referring to?

Basic Buttons and Stroked Buttons, but I just wanted to show you that on a mobile device hover should disappear after releasing the button, but on ionic 4,5,0 button hover disappears only when you click away.

[brandyscarney]

Thanks for the issue! Which device are you seeing this on? I am not seeing it on Safari on my iPhone or Chrome on Android.

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.

The any-hover media query _should_ test to see if any available input mechanism can hover over elements, which should evaluate to false on mobile and not ever get to the :hover CSS.

If you try the example here on desktop and then mobile, you'll see there is no hover effect: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover

And that example uses similar syntax:

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

[JustasKuizinas]

@brandyscarney You are right (any-hover: hover) should help but seems on android 9 it evaluates to true
maybe safer test would be like:

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

I am using Xiaomi mi A2 lite with latest stock android 9.

Here I made a video with the problem using this repo https://github.com/JustasKuizinas/ionic-blank

[brandyscarney]

@JustasKuizinas Thank you for the extra info!

[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; }

[tkem]

This issue still exists with Ionic 5!