Blog (my web musings)

One line of JavaScript to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element (button, link) is clicked. With this script, a tap of the surrounding area will remove hover CSS.

Demo

What's the problem?

In the opening paragraph, I state that a problem with hover activated CSS on iOS is that hover styles aren't removed until another element takes focus. A notable case for this is with CSS-only dropdown menus - the kind we see on desktop, which an iPad held in landscape orientation may also be big enough to accommodate.

Picture these steps;

1. An iPad user activates the desktop CSS menu,
2. Sub-menus dropdown over content below,
3. The dropped / revealed menu does not hide again until something else is tapped...

... But how can a user make the decision to tap "something else" with half the screen obscured?

JavaScript-enhanced menus may have already tackled this issue in a few ways;

• There may be a closing mechanism applied to the parent button - a tap on the same button that reveals the sub-menu, also hides it again.
• There may be a closing mechanism that is triggered with a tap elsewhere on the screen.
• There may be a user-intent delay - where the menu will "unhover" when there has been no interaction with it for a certain amount of time.

* But what about our CSS-only hover menu? How can we quickly "unhover" it without introducing JavaScript?

An interesting question. CSS animations may provide a CSS-only way to introduce a user-intent delay. I haven't tested the idea (yet), but thinking about it in the here and now, it seems plausible that the transition-delay: time; property may offer a way to automatically hide a dropdown, but I'm not sure how well it would translate between mouse and touch; Hiding the menu quickly enough when a mouse has moved away from it, AND offering enough of a delay on touch to give the user time to read, process, and choose a menu option. The mouse / desktop scenario is capable of identifying both the user's intent to open and close the menu (albeit with a delayed close) but the touch / mobile scenario only really identifies the user's intent to open the menu - the closing action is automatic, on a timed delay.

Hmmmm, so maybe CSS can't really offer an ideal solution. What about JavaScript? Let's revise the earlier question...

* But what about our CSS-only hover menu? How can we quickly "unhover" it without introducing a lot of JavaScript?

A small and quick JavaScript fix

Here's something that I identified as a happy side-effect while exploring how to beat the 300ms delay on touch -- the CSS-only menu closes with a tap anywhere else on the screen -- but I wasn't thrilled about using a 25kb script, or even a 5kb script, just to hide open menus. So I isolated the pertinent part of the code to this;

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS

The mere presence of this line somewhere in your script file (or on your web page, in <script> tags) will tame those content-obscuring dropdowns and send them cowering for cover with a tap anywhere on the screen. Sweet!

Check out the demo to compare the effect on a menu (before and after) - iOS 'Sticky Hover' Fix - for iPad/ iPhone:

Demo

 I hope you find it useful.

Disclaimer

Please test thoroughly in your own particular website setup because it may or may not introduce quirky behaviours in other script utilities.