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

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

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

— Fosco

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

Respostas:

216

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

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

— Kennytm
fonte

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

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

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

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,

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

— cheiroso
fonte

Há uma versão do Mozilla com a qual preciso me preocupar?

— Sterling Bourne