iPad Safari: Comment désactiver l'effet de clignotement rapide lorsqu'un lien a été atteint

Question 1

Y a-t-il un moyen de désactiver cela?
Je veux dire seulement dans le navigateur ... Lorsque vous cliquez sur un lien ou un bouton ou un div qui a une fonction de clic dessus, il scintille une boîte grise où vous avez cliqué rapidement. Comment éviter cela?

Question 2

Vous pouvez définir une couleur transparente pour la -webkit-tap-highlight-colorpropriété de cet élément.

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

Question 3

En utilisant Mobile Safari dans Phonegap, seul cela a fonctionné:

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

Source: Les animations CSS de l'iPhone WebKit provoquent un scintillement

De plus, sur le panneau principal, activez le rendu:

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

Source: Empêcher le scintillement lors de la transition webkit de webkit-transform

Answer 1

88

Y a-t-il un moyen de désactiver cela?
Je veux dire seulement dans le navigateur ... Lorsque vous cliquez sur un lien ou un bouton ou un div qui a une fonction de clic dessus, il scintille une boîte grise où vous avez cliqué rapidement. Comment éviter cela?

ipad mobile-safari chat
la source

4

Pourquoi voudriez-vous? C'est pour que l'utilisateur sache qu'il a réellement activé quelque chose ... c'est très utile.

Fosco

3

Fondamentalement, j'ai un div au-dessus d'une grande image. Quand ils double-cliquent dessus, cela fait un zoom avant. (J'ai désactivé l'option de zoom pour d'autres raisons) et lorsque vous cliquez dessus une fois, cela permet à une barre d'outils de s'afficher ou de disparaître. Puisque ce div est transparent, je ne veux pas qu'il scintille à chaque fois qu'ils cliquent dessus. Cependant, je le garde sur la plupart de mes autres boutons.

chat

Answer 2

4

Pourquoi voudriez-vous? C'est pour que l'utilisateur sache qu'il a réellement activé quelque chose ... c'est très utile.

Fosco

Answer 3

3

Fondamentalement, j'ai un div au-dessus d'une grande image. Quand ils double-cliquent dessus, cela fait un zoom avant. (J'ai désactivé l'option de zoom pour d'autres raisons) et lorsque vous cliquez dessus une fois, cela permet à une barre d'outils de s'afficher ou de disparaître. Puisque ce div est transparent, je ne veux pas qu'il scintille à chaque fois qu'ils cliquent dessus. Cependant, je le garde sur la plupart de mes autres boutons.

chat

Answer 4

216

Vous pouvez définir une couleur transparente pour la -webkit-tap-highlight-colorpropriété de cet élément.

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

KennyTM
la source

73

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

CrazyTim

Très cool, merci. Je l'ai ajouté au conteneur div qui englobe mon application mobile, mais supposons que vous puissiez également l'ajouter à l'élément body comme ceci: body {-webkit-tap-highlight-color: rgba (0,0,0,0); }

B-Money

13

Pour mémoire, une application que je crée dans Phonegap a continué à avoir un bref scintillement lorsque vous appuyez sur des éléments, et il était juste perceptible de me déranger. La mise -webkit-tap-highlight-color:transparentà tout (c'est-à-dire *) fonctionnait comme un charme.

Charlie

2

Charlie - Le problème que vous rencontrez est que Webkit semble appliquer brièvement la couleur de surbrillance à l'élément une fois qu'il devient inactif. Plutôt que de définir une règle globale comme celle-ci, l'ajout -webkit-tap-highlight-color: rgba(0,0,0,0);de l'état inactif du lien ciblé résout le problème.

Michael Johnston

1

Je veux juste ajouter que l'utilisation webkit-tap-highlight-color: nonene fonctionne pas . Vous devez en fait définir la transparence via rgba(0,0,0,0).

matthewpavkov

Answer 5

73