Is @media hover broken when using Windows Tablet mode?

Wrapping hover styles in a
@media (hover: hover) and (pointer: fine)
or similar is a nice way to stop hovers on touch devices, as when you hold your finger for about a second hovers work there as well.

However, a friend told me a user on their site noticed that hovers stopped working for them (using the media query above). So I did a little testing to find out why and the results were interesting.
I used this codepen https://codepen.io/dukecroc/pen/dyzjmBB and these are the results https://prnt.sc/JPIpAtOHej7o

Notes on the results:
  • a phone with stylus support will show
    @media (hover: hover)
    as true even if the stylus is not being used (it's not out of the phone)
  • when in Windows Tablet mode the values slightly differ between chrome and firefox (
    any-hover
    )
  • when in Windows Tablet mode the values make sense only if you use the touchscreen. When using a mouse they stay the same, which means that
    @media (hover: hover)
    is false even if you use a mouse.
What are your thoughts? For me, I am unsure if I should wrap my hovers in these media queries. Maybe only if it's an actual problem on touch devices.
Was this page helpful?