Is @media hover broken when using Windows Tablet mode?
Wrapping hover styles in a
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:
@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
as true even if the stylus is not being used (it's not out of the phone)@media (hover: hover) - 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
is false even if you use a mouse.@media (hover: hover)