Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
wayland
wayland
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 94
    • Issues 94
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 24
    • Merge Requests 24
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • wayland
  • waylandwayland
  • Issues
  • #51

Closed
Open
Opened Jul 26, 2018 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 admin enable hashed storage. More information
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: wayland/wayland#51