iOS requires double-tap for a simple link element

Question

If you tap on an element on iOS, the browser fires mouseover/mousemove events and renders :hover styles. If it detects „content change“ in this process no click event gets fired and you have to tap again to fire a click event. This is documented on developer.apple.com.

I had the issue on a webpage that a „content change“ was detected even though no mouse events or :hover styles were applied. It took a while, but I was able to reduce the webpage to a small test case:

<style>
    a:hover { color: red }
    foo + * { color: red }
</style>
<a href="about:blank">foo</a>
<input type="search">

On this page you have to tap two times on the "foo" link to navigate. Tested with iPad mini and iPhone (both native and in the simulator).

After that I found this blog post with a similar issue. But the only fix that works for my issue is the following CSS:

input[type=search]::-webkit-search-cancel-button {
    display: none;
}

But I can’t use this workaround if I want the search cancel button to be visible.

Is there an other workaround for this issue?

I posted this bug on bugreport.apple.com several days ago, without a reaction of apple until now. This bug seems to be in iOS 6 and 7 and it would be great if it gets fixed some day.

How do I find out if this is a webkit or an iOS bug?

Where is the right place to report this bug?

---

UPDATE

This bug seems to be fixed in iOS 8. Tested with iPad mini and iPhone (both native and in the simulator).

UPDATE 2

Bug wasn’t completely fixed in iOS 8, it still appears if you put some CSS between the braces, e.g. color: red. I updated the test case to show the bug also in iOS 8.

UPDATE 3

The bug is not fixed in iOS 9, still no reaction from bugreport.apple.com other than “behaves as intended”.