This works perfectly in 2 steps.
Set your body tag to be like this <body ontouchstart="">. I'm not a fan of this "hack", but it allows Safari on iOS to react to touches instantly. Not sure how, but it works.
Set up your touchable class like this:
// I did this in SASS, but this should work with normal CSS as well
// Touchable class
.example {
// Default styles
background: green;
// Default hover styles
// (Think of this as Desktop and larger)
&:hover {
background: yellow;
}
// Default active styles
&:active {
background: red;
}
// Setup breakpoint for smaller device widths
@media only screen and (max-width: 1048px) {
// Important!
// Reset touchable hover styles
// You may want to use the same exact styles as the Default styles
&:hover {
background: green;
}
// Important!
// Touchable active styles
&:active {
background: red;
}
}
}
You may want to remove any animation on your touchable class as well. Android Chrome seems to be a little slower than iOS.
This will also result in the active state being applied if the user scrolls the page while touching your class.