Hover state on buttons in mobile stays after click in incoherent ways

[lukboegit]

Current Behavior

Depending on the theme there is a visual difference if a button has been clicked and stays in hover state in mobile.

Expected Behavior

There should be a theme independent way to choose if a button should visually stay in hover state after being clicked.

Steps To Reproduce

Taking the docs as example: https://www.skeleton.dev/elements/buttons

If I use the Skeleton theme in light mode on mobile, the buttons in the button group are a lighter color after having been clicked. This is not the case in dark mode.

I understand this is a) A very minor issue and b) Probably not an easy fix

But i just spent two hours trying to "debug" this because the behavior of my buttons seemed different from the ones in the docs despite the same implementation until I noticed it is theme dependent.

I am by no means an expert programmer but I'm very happy with SkeletonUI in general and very thankful for all your work. If I can be of use to work on this I'd be happy to do so.

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@lukboegit would be useful to know what mobile platform(s) and browsers you've tested.

Additionally, we've rewritten the styles for v3, so it would be nice to know if this carries forward. You can test here: https://next.skeleton.dev/docs/tailwind/buttons/

[lukboegit]

I noticed the issue on my iphone12 and could replicate it with Chrome when using the responsive dev tools view. Firefox (normal and dev edition) seem to work entirely different with simulating touch, the buttons show no visual response to being clicked at all there. They function normally otherwise though.

As far as I can see the issue is unchanged in v3. Choose the Cerberus Theme in light mode for example and the filled and tonal-preset buttons stay a different color after being clicked, which does not happen in dark mode. Using the Rose theme the effect is also present in dark mode but extremely faint and barely noticeable.

[endigo9740]

Ok, so two things here.

First, if you're in Europe, Apple allows for non-iOS native rendering engines for third party browsers. So I need to know if that's a factor here. If you're not in Europe then there will only be two options: Mobile Safari and webview. Third party vendors (Chrome, Firefox, etc) all use webview. These can render slightly different, but I'd expect them to be similar for active/focus states.

Second, you mention that you're seeing a "hover" state when selecting the buttons. But there is no such thing as hover on touch screens. So my guess is you meant active or focus states. On mobile there will always be a mobile-specific focus state, which we describe here: https://www.skeleton.dev/elements/core#mobile-focus

Skeleton doesn't implement this style, but rather it is browser-native. We merely change the color. The default is a medium blue tone in many mobile browsers, and we change it to a theme-specific neutral surface tone. But it's an a11y feature so we don't modify it beyond that (intentionally). This would be present for both v2 and v3.

I also want to verify if that is perhaps what you're seeing and referring to here. I don't have easy access to an iOS device, but I do have the iOS simulator, so I've used that to record a quick video of what I see when I select buttons. Let em know if this aligns with what you're seeing:

https://github.com/user-attachments/assets/7f74d6cb-fded-4681-920f-e7c1b1c5845a

NOTE: that small "flash" on tap is the mobile focus style. It may behave slightly different in some browsers, including remaining focused after tap in some browsers.

If not, then a screenshot or video recording would be useful here. Just so what understand what specific issue you're asking us to troubleshoot.

[lukboegit]

Yes! Thank you for taking the time to go into so much detail. What is shown in your video is exactly what I meant: The button stays in a visibly different state after being clicked only in darkmode. And yes, I think I got confused with the hover/focus state. In my case the button, after being clicked, stayed exactly the color of its hover state on non-mobile devices. In retrospect that was probably more of a coincidence.

Also yes I am in Europe, did not know about the third party rendering engines before, thanks!

As for the issue itself: I am afraid I am still a bit confused. Is it just something that just is the way it is because of browser-native styles and a11y features? Does it even need fixing? Or is there a workaround?

In any case I'd more than understand if you said "that's just the way it is" and close this thread. This is my first (bug)report and I am impressed how you manage to put out this great product for free and still find the time to answer beginner questions in detail. Honest thanks <3

[endigo9740]

@lukboegit here's more information about the iOS regulations in Europe. They probably explain it better than I can: https://www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu

If your issue is what's shown in my preview above, then all is working as intended. Again, we do not actively enable the "highlight" state. That's just default browser behavior on mobile browsers and/or touch devices. The idea is to give users visible feedback to confirm their selection. It's especially useful when there's lots of small actions on the page - to know which you actually pressed. It's not recommend you take any action on this or try to remove this. Again, it's a good thing to have.

As per why it differs between light/dark mode, I think the color is just more prominent on one than the other. But should actually be occurring for both. If you would like to modify the color, this is where and how we set it. These are global styles that are enabled by default when using the Skeleton Tailwind plugin: https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/base/core.css#L25

It doesn't sound like there's anything actionable on our end, so I'm going to go ahead and close this for now. But feel free to reach out if you have any further questions. I'll see it.