Skip to content

GitLab

Closed
Opened by Theo Tzaferis@tzfrs

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 to Wayland can reproduce this issue.
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information