iOS Safari: “Nominate another person” button is translucent

[pauldwaite]

Steps to reproduce

1. Visit the app in Safari on iOS 10 (observed on iPhone; presume it’s also present on iPad).
2. Nominate a friend.
3. Look at the “Nominate another person” button

Expected behaviour

The button has 100% opacity.

Actual behaviour

The button has less than 100% opacity for some reason, like the hover styles are applying to it.

[pauldwaite]

Safari’s web inspector tells me that the hover styles are being applied to the button. I’m not quite clear why iOS is doing this at this point, but I’m also not sure how to avoid it.

[robertocarroll]

Do these buttons work in Safari on iOS 10?

http://tachyons.io/components/buttons/basic/index.html

[robertocarroll]

Here's the details on the hover effects for Tachyons: http://tachyons.io/docs/themes/hovers/

[robertocarroll]

Could swap "dim" for "grow" and see if that fixes it?

[robertocarroll]

Could this be the problem? http://stackoverflow.com/questions/12450648/ahover-style-sticking-on-ios-browser

[pauldwaite]

Yup, that’s basically it. iOS Safari seems to be maintaining the hover or focus state of the button longer than other browsers.

One alternative solution is to use the hover media query to limit the .dim hover styles to browsers whose primary input device supports hovering.

iOS Safari has supported this since version 9, so it’ll reliably keep the hover styles away there. However, it may also remove the hover styles from devices that are primarily touch, but also support the mouse.

Also, we either implement this by customising tachyons, or by having our own differently-named class that does the same thing, but with the hover media query.

[robertocarroll]

I think that's OK to use the @hover and those borderline cases don't get hover effect. Don't you reckon?

[pauldwaite]

Yeah I think so. I probably should play with this more to see if maybe it’s just that the button is staying focused. Maybe I checked that before.