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

Question 1

¿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?

Question 2

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

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

Question 3

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

Answer 1

89

¿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

4

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

Fosco

3

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

Answer 2

4

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

Fosco

Answer 3

3

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

Answer 4

217

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

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

Kennytm
fuente

73

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

13

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

2

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

1

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

Answer 5

73