ionic-framework: 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:

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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 15 (6 by maintainers)

Commits related to this issue

fix(many): change the CSS media selector for hover closes #18570 — committed to alexandre-khoury/ionic-framework by alexandre-khoury a year ago

Most upvoted comments

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

evangunawan on Aug 21, 2019

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

haroon407 on Jun 28, 2021

This issue still exists with Ionic 5!

tkem on Mar 10, 2020

@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

ezgif com-resize

JustasKuizinas on Jun 21, 2019