iPad Safari: cómo deshabilitar el efecto de parpadeo rápido cuando se ha pulsado un enlace

¿Hay alguna forma de desactivar eso?
Solo me refiero al navegador ... Cuando haces clic en un enlace, un botón o un div que tiene una función de clic, parpadea un cuadro gris en el que hiciste clic rápidamente. ¿Cómo puedo prevenir esto?

ipad mobile-safari

— gato
fuente

¿Por qué querrías hacerlo? Es para que el usuario sepa que realmente activó algo ... es muy útil.

— Fosco

Básicamente, tengo un div encima de una imagen grande. Cuando hacen doble clic en él, se acerca. (He desactivado la opción de hacer zoom por otras razones) y cuando hace clic una vez, permite que una barra de herramientas aparezca o desaparezca. Dado que este div es transparente, no quiero que parpadee cada vez que hacen clic en él. Sin embargo, lo mantengo en la mayoría de mis otros botones.

— gato

Respuestas:

217

Puede establecer un color transparente a la -webkit-tap-highlight-colorpropiedad de ese elemento.

a {
    -webkit-tap-highlight-color: transparent;
}

— Kennytm
fuente

es decir:-webkit-tap-highlight-color: rgba(0,0,0,0);

— CrazyTim

Muy bien, gracias. Lo agregué al contenedor div que abarca mi aplicación móvil, pero supongo que también podría agregarlo al elemento del cuerpo de esta manera: body {-webkit-tap-highlight-color: rgba (0,0,0,0); }

— B-Money

Para que conste, una aplicación que estoy creando en Phonegap seguía teniendo un breve parpadeo al tocar elementos, y se notaba que me molestaba. Establecer -webkit-tap-highlight-color:transparenttodo (es decir *) funcionó a las mil maravillas.

— Charlie

Charlie: el problema que está viendo es porque Webkit parece aplicar brevemente el color de resaltado al elemento una vez que se vuelve inactivo. En lugar de establecer una regla global como esa, agregar -webkit-tap-highlight-color: rgba(0,0,0,0);al estado inactivo del enlace de destino resuelve el problema.

— Michael Johnston

Sólo quiero añadir que el uso webkit-tap-highlight-color: noneno no funciona. De hecho, debe establecer la transparencia a través de rgba(0,0,0,0).

— matthewpavkov

Usando Safari móvil en Phonegap, solo esto funcionó:

* {  -webkit-backface-visibility:  hidden;
     -webkit-tap-highlight-color:  transparent;
  }

Fuente: las animaciones de iPhone WebKit CSS causan parpadeo

Además, en el panel principal, habilite la representación:

div.myPanelOrWhatever 
  {
      -webkit-transform: translate3d(0, 0, 0)
  }

Fuente: Prevenir el parpadeo en la transición de webkit de webkit-transform

— fragante
fuente

¿Hay alguna versión de Mozilla de la que deba preocuparme?

— Sterling Bourne