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.1 Reply
Things to note:
- for the tests I used 3 laptops (all 2 in 1 with 360 rotation), a desktop PC, a Pixel 6 Pro and an S23 Ultra. Latest versions on everything - Windows, Ubuntu, Android, Chrome, Firefox
- I do not have a tablet to do the test on, but I guess the results would be like on one of the phones (maybe it depends if it has stylus support)
- I did not really care enough to test hovers on Smart TVs
- having a mouse connected to a laptop in Tablet mode does not change any of the values
- when you rotate a 2 in 1 laptop so that the keyboard is on the back (like this https://prnt.sc/2xhJKpTFk9sa), usually the OS enters tablet mode automatically. Windows used to have a way to disable it (I think in Windows 10), but I did not find such an option on the latest version. For Ubuntu I haven't really gone deep into this, but with the default options it does not change anything for the test when you enter tablet mode, apart from disabling the keyboard and touchpad
- in the beginning I mentioned that the reason for this test was that a user noticed hovers stopped working for them. I am unsure if an update happened or they started using their laptop in Tablet Mode on Windows, or anything else. The info I got is that they use a HP Envy laptop.
Forgot to test on a phone with a connected mouse. The results are like the one on "phone with stylus support"