1528441 - @media (hover) and (any-hover) does not work on Firefox 64/65 where certain dual inputs are present

Status: RESOLVED FIXED

(Core :: Widget: Win32, defect, P3)

Description

[Lee Griffin]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.96 Safari/537.36

Steps to reproduce:

I checked on version 64, and then updated to 65, for use of @media (hover:hover) and @media (any-hover: hover). Make any CSS code that has a valid hover psuedo-class to recreate. i.e.

@media (hover:hover) {
a:hover, a:focus {
color: red;
}
}

and the same for "any-hover".

I also tested with a simple CSS declaration such as body { color: red; } with the same failed application.

Actual results:

On my machine which has an Acer T232HL-0 windows compatible touch screen as part of a multi screen set up, as well as a conventional USB connected mouse and keyboard, any attempted hover by the MOUSE failed to deliver the hover style. Using the KEYBOARD failed to deliver the focus style that was also contained within the @media declaration. Using TOUCH on the monitor did trigger the hover and/or focus psuedo class.

I then tested on Firefox 65 on a second machine, a laptop with only the built in keyboard and a USB connected mouse, on the same site with the same code, and it did correctly use the hover styles when either hovered using mouse or focused using keyboard.

As noted above, I also tried to use a simple style inside the @media block, and this didn't get used either on the multi-input machine.

Expected results:

It would be my belief that when using the mouse within the browser, it should determine that the mouse is the "primary" input and trigger @media (hover:hover) declared styles.

I understand there could be room for interpretation of the specification to mean that it should only trigger using @media (any-hover:hover) through otherwise determining or deferring to the lowest denominator of an input being available that is non-hover, though I would personally disagree. But even so at the very least use of "any-hover" should also provide the expected styles on a device that does have a hover enabled peripheral such as a mouse, even if it has non-hover inputs enabled at the same time.

Comment 1

[u554753]

Moving to CSS Parsing and Computation component. I don't have Windows touch screen hardware, so this will require verification.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Maybe Hiro knows what's going on here?

Comment 3

[Hiroyuki Ikezoe (:hiro)]

This reminds me bug 1498286, as far as I can tell unfortunately Windows doesn't provide an API to detect touch devices reliably.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

la_grief, just a simple question. Does any-hover query work fine on Chrome? (I'd also like to know the result on Chrome on Surface)

Comment 5

[Lee Griffin]

That's correct, original testing for my code was in chrome and it wasn't until I then tested in Firefox that I saw the issue. Chrome is fine, Firefox on the same system fails to produce the same result.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Thanks! Anyway it's a backend problem.

Comment 7

[Lee Griffin]

Is there any update on this bug at all? It's still occurring in my builds.

Comment 8

[Doug]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

I have an Asus Laptop with a touchscreen with this bug. Both the hover and any-hover media queries don't match.

A great test is the examples on MDN, both examples show no hover effects for me in Firefox. Both examples work fine in Chrome 81 and Edge 44.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover

Comment 9

[adamjagosz]

On Firefox 104.0.2, both @media (hover: hover) and @media (pointer: fine) do not work for me on a Windows 10, no touch devices plugged.

Comment 10

[adrien.foulon]

Issue is still present on 108.0.1

Using

@media (any-hover: none) or @media (hover: none)

I have a touchscreen and a trackpad (dell xps) which falls under any-hover: hover and hover: hover however the media query still applies the same so for Firefox my laptop doesn't have hover capabilities even though I have a mouse, just because I have a touchscreen

This media query does not apply (correct behavior) on chrome

Comment 11

[Chris Martin [:cmartin]]

Hi there,

I believe this was fixed in Bug 1813979.

I tested on my Dell XPS, which also has a touchscreen + touchpad combo, with and without a mouse, and any-pointer and any-hover appear to be fixed.

Your comments about the pointer and hover queries are spot-on -- the current behavior isn't objectively "wrong", but I think we are not giving the best answer possible.

Bug 1851244 has been filed as a follow up to see if we can be a bit more precise.

Cheers!