Tablets hover on first click, click on second click

Question

Posting this question largely in the hopes of confirming my suspicions of the behaviour, and thus documenting it for other programmers. (Since I found no record of this anywhere online)

I have a site that I'm building, whose nav bar has the following properties: The horizontal section is a <ul> of <li>s and some of the <li>s hav both:

• A n<a> element taking you to that topic.

• A hover CSS selector that triggers display:block on a submenu - a nested <ul> which then drops down vertically.

On a desktop this all behaves as I'd expect: hovering on the key element exposes the submenu, and clicking on it executes the click event (in this case a normal <a> link.

But on an iOS device (tested on Air, Mini, iPhone 6) I found that tapping once would expose the submenu, and tapping a second time (when the submenu is open) will actually invoke the link on the controlling element.

Long-pressing will bring up the "link context menu"

This is exactly what I wanted it to do, which is GREAT! But I don't know WHY it is doing it. Whilst the Menu is Bootstrap based, but I can't find any bootstrap that is doing it.

Currently my best guess is that iOS Safari has some magic code that adds this (obviously desirable) behvaiour by deciding that if you have an element with :hover CSS (or, I imagine, an onhover eventhandler bound) and also a click eventhandler bound then the first tap will invoke, and keep invoked, the hover event, and the second tap will invoke the click event.

Question:

1. Does anyone know, confidently, what the source of this behaviour is.

2. Can anyone find any documentation of this behaviour!?

3. Would people like to contribute other platforms on which this does/doesn't work (Android tablets? Windows tablets? older iOS?)

Answer 1

1. The behavior triggering a clickable element such as an anchor link to fire only on the second tap in iOS, is described in this post by Nicholas C. Zakas (@slicknet). What triggers the double tap is a:

:hover Rule that either hides or shows another element using visibility or display.

e.g.

<style>
    p span {
        display: none;
    }

    p:hover span {
        display: inline;
    }
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

2. Apple also provides a documentation on Handling Events for reference.

3. No other platforms do this. It's iOS specific since at least version 5 (likely since version 1). Because it's not cross-platform, for Android and other touch devices, it has to be handled differently, and requires canceling click events etc... using JS. While I have managed to do this. I think it's fair to say that for CSS navigation menu bars to work with toggle elements that are both links and toggles is very difficult to achieve in a touch-only environment.