The hover @media feature query lets you check if a device’s primary input device supports hovering interactive elements. It became part of the web platform as of CSS Media Queries Level 4. The hover: hover query should match on devices with a mouse cursor (e.g. a touchpad), and hover: none should match touchscreens (mobile devices). Unfortunately, Samsung devices say their touchscreens are touchpads.
The media feature query let you detect and apply different styling when a device supports hover interactions. For example, you can collapse an expandable menu when the device supports hovering and expand it by default when it doesn’t.
The media query is supported in all leading web browsers and operating systems (OS). Except for Chromium on Samsung devices running Android. Chromium is the underlying engine used by the default Samsung Internet browser, Google Chrome, Microsoft Edge, Brave, and others.
Any device with a Samsung touchscreen (and the accompanying Android kernel driver) is affected; includes all Samsung devices since 2015 and some third-party Android devices that source their touchscreens from Samsung.
The problem seems to be that the touchscreen reports to the underlying system that it’s both a touchscreen and a mouse. Technically, the affected devices self-report that they have a touchscreen and a touchpad (like on a laptop). Inputs made on the touchscreen get processed as mouse inputs by the (non-existing) touchpad.
I’m not sure why it does this, but I suspect it has something to do with either the Samsung S Pen (a stylus) or Samsung DeX (a docking station that creates a desktop-like experience). These accessories — not compatible with all affected devices — either act like or can pair the device with a hover-capable mouse.
In these situations, the device does have a hover-capable input devices. However, Samsung doesn’t let the OS distinguish between the touchscreen and its other mouse-like input methods. This issue is particularly annoying on devices that aren’t even compatible with these accessories.
I’ve reached out to Samsung and asked them to fix its web compatibility issue. I don’t expect it to get fixed any time soon. This bug seems to be a deeply-rooted OS problem with how Samsung devices handle input. I also expect that many apps have grown to depend on things continuing to misbehave.
It would be possible for either Samsung or the Chromium team to work around the issue with a patch in Chromium. Such a workaround would probably come at the cost of compatibility with the S Pen, DeX, or whatever motivated Samsung’s weird implementation in the first place.
There aren’t any good alternatives to this media query. The best you can do is to assume that small screens are touchscreens, e.g. using @media (max-width: 500px), (max-height: 500px) instead of @media (hover: none). (Replace max with min to substitute for hover: hover.)
Firefox for Android uses the same input capability detection method as Chromium. However, it discards the results and uses a non-hovering course pointer instead. Firefox will always match @media (hover: none) and (pointer: coarse). Although not ideal, it means Firefox will be correct about the input device most of the time.