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

[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!

[souravsaraf123]

I am facing this issue in my PWA. I want to show visual feedback on button tap. I have tried "--background-activated" , "--background-focused" , "--background-hover"

Only "--background-hover" changes the colour , but it stays changed untill i tap outside of the button.

[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

[mxlle]

@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 agree with @JustasKuizinas that you should use the pointer media query (maybe even additionally). Apparently there are some mobile devices that evaluate @media (any-hover: hover) as true, even though no mouse is connected. I tested with Samsung S9 / Android 10.

[averyjohnston]

Hi everyone, and thanks for the issue! I can confirm that this is still a problem on the latest version of Ionic, and likely applies to all components that make use of the @media (any-hover: hover) query to apply hover styling. (For example, a similar issue was also spotted on the ion-tab-button component.)

The root cause, as some have rightfully pointed out, is that @media (any-hover: hover) evaluates to true on some Android devices. (I'm able to replicate on a Samsung Galaxy S10e, and another user has reported seeing it on an S9.) This causes the hover styling to activate incorrectly until you tap somewhere else on the screen.

While this is technically an external issue, we may be able to use a different media query instead of or in addition to the any-hover check as previously suggested. Looking at this page https://hover-pointer-media-query.glitch.me/, which I found while digging through Chromium issues, the pointer: fine query may work here. As such, I'm going to go ahead and file this as a bug so we can investigate further.

[thetaPC]

Thank you for submitting the issue!

It’s been determined that the Ionic components and the browser are working as intended. The issue is coming from certain devices, like Samsung Galaxy, that are not reporting the correct input type. Chromium queries the device/operating system for a list of inputs (mouse, keyboard, touchscreen, etc) and uses those inputs to determine if any inputs support hover states. Since the device is not reporting the correct input type, the sticky hover state is being applied.

The team has decided not to apply a patch internally for this bug since this issue needs to be fixed on the device level. While the proposed PR does resolve the issue for certain devices, it regresses hover behavior on devices that do not report pointer states correctly (see https://github.com/ionic-team/ionic-framework/issues/24179 for more information). There is an open issue on the Chromium bug tracker for this hover issue. I highly recommend that you star this issue to receive updates on the progress and provide any additional information that you may have.

A workaround for this issue is to override the hover state for the desired component. You can do this by using some user agent detection (or device detection) and then applying the hover state to the desired component through a CSS class.

[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.