CSS: @media (hover: hover) rules run even if the device doesn't support hovering
Categories
(GeckoView :: Media, defect, P3)
Tracking
(Not tracked)
People
(Reporter: clement.pit, Unassigned)
References
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0
Steps to reproduce:
I used the following minimal webpage:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
background: red;
}
@media (hover: hover) {
body {
background: blue;
}
}
</style>
</head>
<body>
</body>
</html>
Here's a jsfiddle: https://jsfiddle.net/mcy60pvt/
This bug report was inspired by this stackoverflow question: https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
Actual results:
On Firefox for desktop, I see a blue background. Same on Firefox for Android and on Chromium for Desktop.
Expected results:
On Firefox for Android, I expected a red background, since the primary input mechanism on my phone cannot 'conveniently hover over elements'.
On Chrome for Android I correctly see a red background.
|
||
Comment 1•6 years ago
|
||
Hello, thanks for your report.
I can confirm that the issue is reproducible on Samsung Galaxy S8 (Android 9) on all branches(Nightly, Beta and Release).
Notes:
- Not reproducible on Nokia 6 (Android 7.1.1), Xiaomi Mi 8 Lite (Android 8.1) and Samsung Galaxy Tab S3 (Android 8.0).
|
||
Updated•6 years ago
|
Hello,
I can confirm the bug on Xiaomi Redmi 3S, with LineageOS 15.1 (Android 8.0) Firefox 68.1.1.
There is a PR on https://github.com/web-platform-tests/wpt/pull/19300 that should bring tests for this case.
|
||
Comment 3•5 years ago
|
||
Moving to GV due to https://github.com/mozilla-mobile/fenix/issues/14816.
|
|
||
Comment 4•4 years ago
|
||
I believe that this is fixed by bug 1556983
|
||
Comment 5•3 years ago
|
||
Moving some media bugs to the new GeckoView::Media component.
Description
•