CUNY Academic Commons

A number of issues on touch devices have been reported. Some are related to :hover and others are separate. I'm introducing this bug as a kind of parent for the other issues and a place to get some general ideas down. Separate tickets will be created for specific issues.

One of the issues is with how phone and tablet devices treat elements that have been styled with the CSS pseudo selector :hover. On iOS most of the time when something has :hover, the OS simulates the hover. However depending on what the hover is applied to it reacts differently.

The issue we're facing is related to links that involve hover. If the hover is directly applied to the anchor, a:hover{} then it works fine and just briefly flashes the hover state before proceeding to the link. It seems to also work if the hover is applied to a containing element, p:hover a{}.

If however the :hover rule changes the visibility property, then the behavior changes. Usually this is done where some content is not visible then when you hover over a containing element content inside becomes visible and links appear. In the best case the first click shows the hidden content and the second click leads you to it. However, it seems to be our experience on the Commons that sometimes the second click doesn't lead you anywhere on the link.

For some articles that discuss the problem read these:
http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/

Generally it seems like the two possible solution directions are

1. Remove all :hover from CSS that shows elements with the visible or display properties. You could progressively enhance by using JavaScript to add that back in on no-touch devices
2. Write some JavaScript that makes the links work on touch devices.

We may choose to use different directions for different parts of the site. I don't claim to be an authority on this and open the topic for discussion.