Incorrect CSS media query matches for pointer, any-pointer, hover and any-hover on Surface Laptop
Categories
(Core :: Widget: Win32, defect, P2)
Tracking
()
People
(Reporter: josh.tumath+bugzilla, Unassigned)
References
(Depends on 1 open bug)
Details
(Whiteboard: [win:touch])
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Steps to reproduce:
Using a Surface Laptop 4, open the following test case in Firefox and a Chromium browser like Edge.
https://codepen.io/joshtumath/pen/MWEQOKw
Actual results:
The Surface Laptop 4 matches the following media queries:
pointer: coarse
any-pointer: coarse
Expected results:
The Surface Laptop 4's primary input is the trackpad/mouse, and although it has a touchscreen, its a secondary input. The matching media queries should be:
pointer: fine
any-pointer: coarse
any-pointer: fine
|
Reporter | |
Updated•2 years ago
|
|
|
Reporter | |
Updated•2 years ago
|
|
|
Reporter | |
Comment 1•2 years ago
|
||
This also includes the hover and any-hover media queries.
Actual results on Surface Laptop 4:
hover: none
any-hover: none
Expected results on Surface Laptop 4:
hover: hover
any-hover: none
any-hover: hover
|
||
Comment 2•2 years ago
|
||
The severity field is not set for this bug.
:jimm, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Updated•2 years ago
|
|
||
Updated•2 years ago
|
|
||
Comment 3•1 year ago
|
||
I experience same issue. I am using touch laptop and on the page about any-hover query hover with a pointer (touchpad) does not work: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover
|
||
Comment 4•9 months ago
|
||
Hi there,
Good news! This was fixed in Bug 1813979, and should be live in the latest Firefox 117 release.
I tested the latest Firefox using your Codepen link, and everything seems to work now on the Surface Pro with the exception of your "This box should be blue if your device has touch", but I think your code has a bug.
Your code checks for a touchscreen using any-hover: none, but that's not what that Media Query tests. It tests whether any device on the machine supports hover. Since the Surface Pro has a trackpad/mouse that supports hover, any-hover: hover is correct.
It's also worth noting that even if you unplug your mouse/trackpad from the Surface Pro, you will never see any-hover: none because the screen itself is a pen digitizer, and the pen stylus supports hovering.
Cheers!
Description
•