New issue
Advanced search Search tips

Issue 867912 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug



Sign in to add a comment

Chromium applies hover: none media query

Reported by tzaferis...@gmail.com, Jul 26

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Steps to reproduce the problem:
1. Save the code sample below this list in a file, e. g. index.html
2. Open index.html in Chrome/Chromium
3. Hover over the red div

What is the expected behavior?
1. Div shall become yellow
2. No media query @media (hover: hover) shall be applied.

What went wrong?
1. Div becomes green
2. Media query @media (hover: hover) is applied.

Did this work before? N/A 

Chrome version: 67.0.3396.99  Channel: stable
OS Version: Fedora 28
Flash Version: 

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.

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 fromX11 to Wayland can reproduce this issue.

------

The guys over Wayland told me to file this bug report against Chromium. Here is the issue I opened over at wayland/wayland 

https://gitlab.freedesktop.org/wayland/wayland/issues/51
 
This is the 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>

Labels: Needs-Triage-M67
Hello Susan,

do you think it makes sense for me to provide a virtual box image snapshot that has an OS preinstalled that uses wayland (Fedora for example) and has Chrome preinstalled or do you have your own routine for that? 

Want to help as much as possible in fixing this, because right now, I have to use Firefox for development, so that I'm sure stylings look as expected.
Cc: susan.boorgula@chromium.org
Labels: Triaged-ET Target-70 M-70 FoundIn-70
Status: Untriaged (was: Unconfirmed)
tzaferis.theo@ Thanks for the issue.

Able to reproduce this issue on Ubuntu 17.10 on the reported version 67.0.3396.99 and the latest Dev 69.0.3497.12 as per the original comment
Unable to reproduce the issue on Mac OS 10.13.3 and Windows 10.
Attached is the screen shot for reference.

This is a Non-Regression issue as this behavior is observed from M-60 chrome builds.
Hence marking this as Untriaged for further updates from Dev.

Thanks..
867912-M60.png
48.7 KB View Download
susan.boorgula@chromium.org Do you have an ETA on this bug or any idea if this has high priority?

I have to use Firefox right now, because otherwise I can't really check hover states for our website, but I really want to use Chrome. I'm really used to it and don't want to switch browsers.
This seems to be an issue with Wayland, using the exact same instance of Chromium  on X11 (instead of Wayland) the problem is gone. The mouse/pointer detection might be using something specific to X11?

Components: -UI Blink>Input
Cc: toniki...@chromium.org bokan@chromium.org
Owner: thomasanderson@chromium.org
Status: Assigned (was: Untriaged)
Over to thomasanderson@ to triage. +tonikitoo@ for wayland related.
Labels: Proj-Ozone-Wayland

Sign in to add a comment