Chromium applies hover: none media query
Hello,
this is my first bug report, so I hope I'm giving enough information.
Given is this HTML
<!doctype html>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
div:hover {
background-color: yellow;
}
@media (hover: none) {
div:hover {
background-color: green;
}
}
</style>
<div>
</div>
If you open it in your browser and hover over the red div the background should change to yellow. However, on Wayland (not on X11 or other OS such as OS X, Windows) it changes to green, which means it applies the hover: none
media query.
According to MDN hover: none
is used for mobile devices
The primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input mechanism.
So in my opinion, on Chromium this should be yellow
as well.
Steps to reproduce:
- Save the above code sample in a file, e. g.
index.html
- Open
index.html
in Chrome/Chromium - Hover over the red div
Expected Result:
- Div shall become yellow
- No media query
@media (hover: hover)
shall be applied.
Actual Result:
- Div becomes green
- Media query
@media (hover: hover)
is applied.
Verified that this is a Wayland issue because:
- Co-workers with the same browsers on different operating systems (OS X, Windows) don't have the issue.
- Co-worker with Ubuntu using
X11
doesn't have the issue. - Co-worker with Ubuntu switching from
X11
toWayland
can reproduce this issue.