为什么使用显示切换锚的子元素会导致双击，而使用不透明切换却不会呢？

Question

Why does toggling display and opacity on an anchor's child elements affect touch events differently on iOS devices?

I have a navigation menu in which each item contains an image and a short string of text.

• Each image has a :hover state that uses the same shared overlay image.

• If the :hover pseudo class sets the overlay image's display value, users on iOS devices have to tap the link twice.

• If the :hover pseudo class sets the overlay image's opacity value, users on iOS devices do not have to tap the link twice.

• In both cases, it doesn't matter if the overlay image covers the entire base image or is a smaller inset overlay.

• In both cases, including the :active and :focus pseudo classes does not change the behavior.

I know that I can just remove the :hover rules with JavaScript for touch devices. I'm wondering if anyone knows the why there is a difference between display and opacity .

 a { display: inline-block; height: 200px; position: relative; width: 150px; } a img.overlay { display: block; left: 0; position: absolute; top: 0; } a.overlay-display img.overlay { display: none; } a.overlay-display:hover img.overlay { display: block; } a.overlay-opacity img.overlay { opacity: 0; } a.overlay-opacity:hover img.overlay { opacity: 1; } 

 <p> Set overlay display: </p> <a class="overlay-display overlay-display-first" href="http://www.google.com" target="_blank"> <img class="overlay" src="http://placehold.it/150x150/ff0000"> <img src="http://placehold.it/150x150"> link text </a> <a class="overlay-display overlay-display-last" href="http://www.google.com" target="_blank"> <img src="http://placehold.it/150x150"> <img class="overlay" src="http://placehold.it/150x150/ff0000"> link text </a> <a class="overlay-display overlay-display-first" href="http://www.google.com" target="_blank"> <img class="overlay" src="http://placehold.it/50x50/ff0000"> <img src="http://placehold.it/150x150"> link text </a> <a class="overlay-display overlay-display-last" href="http://www.google.com" target="_blank"> <img src="http://placehold.it/150x150"> <img class="overlay" src="http://placehold.it/50x50/ff0000"> link text </a> <p> Set overlay opacity: </p> <a class="overlay-opacity overlay-opacity-first" href="http://www.google.com" target="_blank"> <img class="overlay" src="http://placehold.it/150x150/ff0000"> <img src="http://placehold.it/150x150"> link text </a> <a class="overlay-opacity overlay-opacity-last" href="http://www.google.com" target="_blank"> <img src="http://placehold.it/150x150"> <img class="overlay" src="http://placehold.it/150x150/ff0000"> link text </a> <a class="overlay-opacity overlay-opacity-first" href="http://www.google.com" target="_blank"> <img class="overlay" src="http://placehold.it/50x50/ff0000"> <img src="http://placehold.it/150x150"> link text </a> <a class="overlay-opacity overlay-opacity-last" href="http://www.google.com" target="_blank"> <img src="http://placehold.it/150x150"> <img class="overlay" src="http://placehold.it/50x50/ff0000"> link text </a> 

Additionally, it doesn't seem to matter if I'm toggling an inline element or a block element. In this snippet, I'm toggling a span inside the anchor.

 a { display: inline-block; height: 200px; position: relative; width: 150px; } a.text-display span.overlay { display: none; } a.text-display:hover span.overlay { display: inline; } a.text-opacity span.overlay { opacity: 0; } a.text-opacity:hover span.overlay { opacity: 1; } 

 <p> Set text display: </p> <a class="text-display text-display-last" href="http://www.google.com" target="_blank"> <img src="http://placehold.it/150x150"> link text <span class="overlay">some other text</span> </a> <p> Set text opacity: </p> <a class="text-opacity text-opacity-last" href="http://www.google.com" target="_blank"> <img src="http://placehold.it/150x150"> link text <span class="overlay">some other text</span> </a> 

According to the iOS Developer Library documentation for One-Finger Events :

Mouse events are delivered in the same order you'd expect in other web browsers illustrated in Figure 6-4. If the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content.

The problem is that it's not clear what constitutes a content change .

Answer 1

Setting display:none removes the element from the document flow; setting display:block (or display:inline) will put it back into the document flow, which would be a content change akin to creating and adding a new element on the fly.

When you're changing opacity, the element is always in the document flow, just not visible.

Try using display:hidden rather than display:block. If I'm right, display:hidden won't cause you any trouble with double-taps either. Using "hidden" does not remove the element from the document flow, which is why there's a blank space equivalent to the size of the hidden object when the object is not visible.

https://www.w3.org/TR/CSS2/visuren.html#display-prop