Mobile Double-Tap Problem on Slider (shoud be one tocuh instead)

Question

I have created a hover effect that shows some buttons in a slider on hover and which also toggles the visibility of them on click. The problem is that on mobile devices an annoying two click is required to display them. So far I have read: https://css-tricks.com/annoying-mobile-double-tap-link-issue/ https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/ How to fix a double tap :hover issue on on mobile (ios)?

And tried:

@media (hover: hover) and (pointer: fine){
.boton-detalles-portafolio:hover {
  color:#827D74;
  border-color:white;
}

.boton-visitar-portafolio:hover {
  color:white;
}


.slick-current.current-hover:hover .contenido-text-links {
  visibility: visible;
  transition: all ease 0.8s;
  opacity:1;
}
}

Codepen of the code used: https://codepen.io/Snippet/pen/NWqeaNR

<div class="slide">      
  <div class="contenido-slide">
  <img class="imagen-principal-portafolio" src="https://tomastestart.cl/wp-content/themes/tomastestart/img/otzerling-portafolio.png"/>
    <div class="contenido-text-links d-flex flex-column">
      <h4 class="subtitulo-portafolio text-center justify-content-center mx-auto">Comunidad Otzerling.</h4>
      <div class="botones-portafolio d-flex justify-content-center">
        <a class="btn mr-2 boton-detalles-portafolio" href="detalle-portafolio">Detalles</a>
        <a class="btn ml-2 boton-visitar-portafolio" target="_blank" rel="nofollow" href="https://www.otzerling.com">Visitar</a>
      </div>          
      <p class="justify-content-center text-center etiqueta-portafolio"><img class="imagen-etiqueta-portafolio" src="<?php bloginfo('template_url'); ?>/img/portafolio-tag.svg"/>Sitio Web</p>           
    </div>
  </div>      
</div>

UPDATE: Removing this line in javascript works fine, that was the cause of the problem, though it now doesn't work the toggle on click.

$('.slick-current').toggleClass('current-hover');

Avishka Dambawinna Avishka Dambawinna · Accepted Answer · 2020-04-13T04:01:00

This problem occurs with IOS devices, you need to use L4 Media Query to solve this , the question you asked is already answered in here and it's accepted. Recommend to refer it How to fix a double-tap:hover issue on on mobile (ios)?

Mobile Double-Tap Problem on Slider (shoud be one tocuh instead)

1 Answers