iPad Safari: como desativar o efeito de piscar rápido quando um link é acessado

Question 1

Existe alguma maneira de desativar isso?
Só quero dizer no navegador ... Quando você clica em um link ou botão ou div que tem uma função de clique, uma caixa cinza pisca onde você clica rapidamente. Como faço para evitar isso?

Question 2

Você pode definir uma cor transparente para a -webkit-tap-highlight-colorpropriedade desse elemento.

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

Question 3

Usando o Safari para celular no Phonegap, só funcionou:

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

Fonte: Animações CSS do iPhone WebKit causam cintilação

Além disso, no painel principal, ative a renderização:

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

Fonte: Evitar cintilação na transição do webkit de transformação do webkit

Answer 1

87

Existe alguma maneira de desativar isso?
Só quero dizer no navegador ... Quando você clica em um link ou botão ou div que tem uma função de clique, uma caixa cinza pisca onde você clica rapidamente. Como faço para evitar isso?

ipad mobile-safari gato
fonte

4

Por que você iria querer? É para que o usuário saiba que realmente ativou algo ... é muito útil.

Fosco

3

Basicamente, eu tenho uma div sobre uma imagem grande. Quando eles clicam duas vezes, ele aumenta o zoom (desativei a opção de zoom por outros motivos) e quando você clica uma vez, permite que uma barra de ferramentas apareça ou desapareça. Como esse div é transparente, não quero que pisque sempre que clicarem nele. No entanto, estou mantendo-o na maioria dos meus outros botões.

cat

Answer 2

4

Por que você iria querer? É para que o usuário saiba que realmente ativou algo ... é muito útil.

Fosco

Answer 3

3

Basicamente, eu tenho uma div sobre uma imagem grande. Quando eles clicam duas vezes, ele aumenta o zoom (desativei a opção de zoom por outros motivos) e quando você clica uma vez, permite que uma barra de ferramentas apareça ou desapareça. Como esse div é transparente, não quero que pisque sempre que clicarem nele. No entanto, estou mantendo-o na maioria dos meus outros botões.

cat

Answer 4

216

Você pode definir uma cor transparente para a -webkit-tap-highlight-colorpropriedade desse elemento.

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

Kennytm
fonte

73

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

CrazyTim

Muito legal, obrigado. Eu o adicionei ao div do contêiner que engloba meu aplicativo móvel, mas suponha que você também possa adicioná-lo ao elemento body assim: body {-webkit-tap-highlight-color: rgba (0,0,0,0); }

B-Money

13

Só para constar, um aplicativo que estou fazendo no Phonegap ficava piscando rapidamente ao tocar em elementos, e era apenas perceptível para me incomodar. A configuração -webkit-tap-highlight-color:transparentpara tudo (ou seja *) funcionou perfeitamente.

Charlie

2

Charlie - O problema que você está vendo é porque o Webkit parece aplicar rapidamente a cor de realce ao item quando ele se torna inativo. Em vez de definir uma regra global como essa, adicionar -webkit-tap-highlight-color: rgba(0,0,0,0);ao estado inativo do link de destino resolve o problema.

Michael Johnston

1

Só quero acrescentar que o uso webkit-tap-highlight-color: nonese não trabalhar. Na verdade, você deve definir a transparência via rgba(0,0,0,0).

matthewpavkov,

Answer 5

73