iPad Safari: come disattivare l'effetto di lampeggiamento rapido quando viene raggiunto un collegamento

C'è un modo per disabilitarlo?
Intendo solo nel browser ... Quando fai clic su un collegamento o un pulsante o un div che ha una funzione di clic su di esso, lampeggia una casella grigia in cui hai fatto clic rapidamente. Come lo prevengo?

ipad mobile-safari

— gatto
fonte

Perché dovresti volerlo? È così che l'utente sa di aver effettivamente attivato qualcosa ... è molto utile.

— Fosco

Fondamentalmente, ho un div sopra un'immagine grande. Quando fanno doppio clic su di esso, si ingrandisce. (Ho disabilitato l'opzione di zoom per altri motivi) e quando fai clic una volta, consente a una barra degli strumenti di apparire o scomparire. Poiché questo div è trasparente, non voglio che lampeggi ogni volta che ci fanno clic. Tuttavia, lo tengo sulla maggior parte degli altri pulsanti.

— gatto

Risposte:

219

È possibile impostare un colore trasparente per la -webkit-tap-highlight-colorproprietà di quell'elemento.

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

— kennytm
fonte

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

— CrazyTim

Molto bello, grazie. L'ho aggiunto al div contenitore che comprende la mia app mobile, ma presumo che potresti aggiungerlo anche all'elemento body in questo modo: body {-webkit-tap-highlight-color: rgba (0,0,0,0); }

— B-Money

Per la cronaca, un'app che sto creando in Phonegap continuava ad avere un breve sfarfallio quando toccavo gli elementi, ed era solo evidente che mi infastidiva. L'impostazione -webkit-tap-highlight-color:transparentdi tutto (cioè *) ha funzionato come un fascino.

— Charlie,

Charlie - Il problema che stai riscontrando è perché Webkit sembra applicare brevemente il colore di evidenziazione all'elemento una volta che diventa inattivo. Anziché impostare una regola globale come quella, l'aggiunta -webkit-tap-highlight-color: rgba(0,0,0,0);allo stato inattivo del collegamento mirato risolve il problema.

— Michael Johnston

Voglio solo aggiungere che l'uso webkit-tap-highlight-color: nonenon non funziona. In realtà devi impostare la trasparenza tramite rgba(0,0,0,0).

— matthewpavkov

Utilizzando Safari mobile in Phonegap, solo questo ha funzionato:

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

Fonte: le animazioni CSS di iPhone WebKit causano sfarfallio

Inoltre, nel pannello principale, abilita il rendering:

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

Fonte: prevenzione dello sfarfallio sulla transizione webkit di webkit-transform

— profumato
fonte

C'è una versione di Mozilla di cui devo preoccuparmi?

— Sterling Bourne