Comments on Samsung devices incorrectly handle CSS @media hover queries

Be civil and read the entire article first. This is not a support forum. Comments from new contributors are moderated. English only.

Leave a comment

Required. Optional. E.g. your homepage, Twitter. or Email required unless anonymous. Not published or shared. Reuse to be recognized as the same commenter.
Plain-text only. Begin lines with a > character to quote.

Emmily Parkison

So annoying! Wanted to use this but Samsung phones are too popular to ignore! Get on it Sam-Sam!

Anonymous

Having the same problem myself, glad to at least find a thread on this issue to know the manual workaround is the best option. Sucks though cause I just finished reading the web.dev section on responsive design which explicitly states NOT to assume small screens are touch screens, but in the end I suppose its going with the lesser of 2 evils...

Dear Samsung, please fix this to be in line with the rest of the web development world's best practices, thank you!

Andreas Burg

I think the best thing would be to remove this media query from CSS because it is not reliable. So the best thing to do first is not to use it at all.

See my device test page:

https://andreasburg.de/browser-hover-check.html

Anonymous

Thanks for covering this. Ive had this issue for some time now and couldnt find a documentation for it

Artur Müller

The new navigator.userAgentData.mobile boolean property should be a standard way to determine whether a device is a mobile device, so, in some cases, it could be used to work around this issue.

That said, it would be much better if Samsung reported this correctly! Daniel, where can this issue be reported?

Daniel Aleksandersen

> The new navigator.userAgentData.mobile boolean

It’s only supported by Chromium. WebKit and Mozilla aren’t on board with it.

> Daniel, where can this issue be reported?

Samsung doesn’t have a public bug database or even a bug report form. Samsung Internet developer relations have encouraged users and developers to use the contact option in the app’s Settings screen.

Artur Müller

> It’s only supported by Chromium. WebKit and Mozilla aren’t on board with it.

I was (clearly incorrectly!) under the impression that it is on the standards track. I guess at least it might still be useful to work around this particular issue with Samsung.

> Samsung doesn’t have a public bug database or even a bug report form. Samsung Internet developer relations have encouraged users and developers to use the contact option in the app’s Settings screen.

Great, thank you.

Marcin Kralka

Hello, I have found out a possible solution:

Instead of checking if we have hover pointing device, we can check if our pointer is fine e.g.:

`@media(pointer: fine)` - expected mouse pointer or any accurate pointing device.

`@media not all and (pointer: fine)` - any other non-accurate pointing device (`coarse`), or devices that don't have any (`none`).

Andreas

I found out that my Lenovo convertible goes into hover:none mode as soon as it is opened. If it is closed, then it is automatically in hover:hover mode.

> Artur ...to determine whether a device is a mobile device...

But what is a mobile device? Is my 15" Lenovo convertible with touchscreen a mobile device? And what if the manufacturer declares this as a mobile device?

> Marcin ...we can check if our pointer is fine...

If you google it, you'll find lots of inconsistencies everywhere and the same problems as with all related media queries any-hover, any-pointer, hover and pointer.

I think W3C should get rid of these media queries because we can't rely on them. Until then, we shouldn't use these media queries and find other solutions.