Why does toggling an anchor's child element with display cause a double tap, while toggling with opacity does not?

Welcome to ScriptMode
Tom R
Posts: 150
Joined: Fri Aug 28, 2015 9:58 am

Why does toggling an anchor's child element with display cause a double tap, while toggling with opacity does not?

Postby Tom R » Wed Mar 09, 2016 12:58 pm

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>

Return to “General”

Who is online

Users browsing this forum: No registered users and 2 guests