Ivо
KPCKevin Powell - Community
•Created by Ivо on 11/24/2024 in #front-end
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.3 replies