@media (hover: none) issue on older mobile devices

[Koniushok]

When use android ^v7.0.1 (v8.0.x , v9.0.x ,...) button focus show background.

Expected Behavior 🤔

starting animation(ripple) then button background disappears

Current Behavior 😯

starting animation(ripple) then button background become grey

Steps to Reproduce 🕹

1. use android ^v7.0.1
2. click button with ripple animation

Tech	Version
Material-UI	v3.9.3
React	v16.8.5
Browser	chrome

[oliviertassinari]

What browser are you using? It doesn't look like Chrome. Could it be the UC Browser with no support for touch action none?

[Koniushok]

I use some browsers. Samsung Internet Browser, chrome, Mi Browser.All have this bug, but if only use android v7.0.1 and up.

[oliviertassinari]

@Koniushok It's funny because it's #15682 problem inversed.
I don't think that we can do anything about it, the @media (hover: none) CSS feature we use is not supported everywhere: https://caniuse.com/#feat=css-media-interaction

[Koniushok]

For some devices this will do. For me it did not fit. But I corrected using:

@media (pointer: coarse) {
    && button:hover {
      background: none !important;
    }
  }

[oliviertassinari]

Let's see how popular alternatives solve the problem:

• Ionic: https://github.com/ionic-team/ionic/blob/d788a8eac6ea8e60b1147be3d6119cd448a845db/core/src/components/tab-button/tab-button.scss#L70-L74.
• Bootstrap: doesn't want to solve the problem hover-media-query twbs/bootstrap#25182.
• Andt mobile: has an .active class, no focus, hover styles.
• Andt: doesn't solve the problem.

I have tried the following codepen on Android 6, Chrome 74. It works as expected. I think that we should keep the current solution we have on the master branch. I'm not aware of any better solution.

Your browser screenshot doesn't seem to use Chrome. What browser is it?

[Koniushok]

I used Samsung Internet Browser v9.0.01.80

[Koniushok]

chrome http://g.recordit.co/k3Q3tBAdOH.gif

[Koniushok]

Let's see how popular alternatives solve the problem:

• Ionic: https://github.com/ionic-team/ionic/blob/d788a8eac6ea8e60b1147be3d6119cd448a845db/core/src/components/tab-button/tab-button.scss#L70-L74.
• Bootstrap: doesn't want to solve the problem twbs/bootstrap#25182.
• Andt mobile: has an .active class, no focus, hover styles.
• Andt: doesn't solve the problem.

I have tried the following codepen on Android 6, Chrome 74. It works as expected. I think that we should keep the current solution we have on the master branch. I'm not aware of any better solution.

Your browser screenshot doesn't seem to use Chrome. What browser is it?

http://recordit.co/YtA8nrtGc2

[oliviertassinari]

I used Samsung Internet Browser v9.0.01.80

@Koniushok Thanks. I can reproduce the problem with Samsung Internet Browser (not Chrome but uses Chromium). This browser has a higher market share than IE 11. This is concerning as the last version of Samsung Internet Browser is impacted. At the same time, we don't officially support it. The problem with the proposed fix is that it involves the pointer precision, it seems unrelated to the hover capability. I don't think that it's an option we can rely on. The Ionic strategy doesn't work either (tested). I fear we will have to wait for a fix in the browser.

Now, Material-UI API allows you to patch the generated styles, you can apply the changes in your project. There is no lock-in.

[Koniushok]

I checked browsers:

1. uc browser v12.10.2.1164,
2. Firefox v65.0,
3. Chrome v74.0.3729.136,
4. Samsung v9.0.01.80.
   All 4 browsers have this bug. Android v7.0.1+.
   I think all browser have this bug on android v7.0.1+.

[oliviertassinari]

@Koniushok Interesting, it seems to be phone related (Samsung)

OK

• Nexus 5
• OnePlus 6
• Pixel 3
• LG - G5
• Moto X
• iPhone X

KO https://www.ctrl.blog/entry/css-media-hover-samsung.html

• Galaxy Note 9
• Galaxy S8
• Galaxy S9

[oliviertassinari]

I haven't realized, It's a duplicate of #15000.

[oliviertassinari]

For reference, the only workaround we found for this problem so far is in mui/material-ui-pickers#1653 (comment) with @dmtrKovalenko.