Thoughts on disabling hover state for mobile devices

[cmintey]

During my testing to migrate to v4 Skeleton, I noticed that, on mobile devices, buttons and tabs (really most things clickable) are experiencing "sticky" hover.

After a quick google search, I found that this is a thing and I'm not crazy. Basically on touch devices where hovering isn't really a thing, it can cause the hover state to become stuck after you click on the element with a hover style. It seems tailwind has a workaround for this when you use their @variant syntax as it checks is hover is supported on the device and only applies the style if it is supported.

It seems that Skeleton does not use the @variant hover directive at all and instead opts for using &:hover.

What are your thoughts on updating all usages of the &:hover with @variant hover, or if using the tailwind directives is not desirable, replacing &:hover with

&:hover {
    @media(hover: hover) {
        <your hover styles>
    }
}

reference: https://bordermedia.org/blog/tailwind-css-4-hover-on-touch-device, https://tailwindcss.com/docs/upgrade-guide#hover-styles-on-mobile

[endigo9740]

Yeah this is an interesting idea that I've experienced but never had the chance to document an issue for. Thank you for doing that Carter. A couple things here..

It seems that Skeleton does not use the @variant hover directive at all and instead opts for using &:hover.

So this is partially true. With multiple hands on the code, this seems to be an inconsistency in our current implementation. We do utilize this some places, such as as the chips:

https://github.com/skeletonlabs/skeleton/blob/main/packages/skeleton/src/utilities/chips.css#L28

But I agree with the sentiment that we should fall on a universal standard. Which would then open the door to customizing to the variant as you described above.

I actually think this overlaps into a larger topic of discussion around universal styles for focus states. Include the use of outline for tab navigation on desktop. Which is actually one of the items on our v5 proposal. We keep running into scenarios where you (and others!) have brought forth suggestions currently noted in our v5 proposal, so I'll think about making this public soon. I do believe there will still be a large gap before we can begin those changes at scale, but it can't hurt to gather community feedback in the meantime.

For now, if you're open to contribution, I think a consistency pass for hover variant usage would be a great place to start. Including, or followed by, a pass with the suggestions above to handle mobile states.