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


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?


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

Respostas:


216

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

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

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,

8

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


Há uma versão do Mozilla com a qual preciso me preocupar?
Sterling Bourne
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.