Come hanno affermato altre risposte, iOS Safari non attiva la :active
pseudo-classe a meno che un evento di tocco non sia associato all'elemento, ma finora questo comportamento è stato "magico". Mi sono imbattuto in questo piccolo blurb sulla Safari Developer Library che lo spiega (enfasi mia):
È inoltre possibile utilizzare la -webkit-tap-highlight-color
proprietà CSS in combinazione con l'impostazione di un evento di tocco per configurare i pulsanti in modo che si comportino in modo simile al desktop. Su iOS, gli eventi del mouse vengono inviati così rapidamente che lo stato inattivo o attivo non viene mai ricevuto. Pertanto, lo :active
pseudo stato viene attivato solo quando è presente un evento di tocco impostato sull'elemento HTML, ad esempio, quando ontouchstart è impostato sull'elemento come segue:
<button class="action" ontouchstart=""
style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
Testing Touch on iOS
</button>
Ora, quando il pulsante viene toccato e tenuto premuto su iOS, il pulsante cambia nel colore specificato senza che venga visualizzato il colore grigio trasparente circostante.
In altre parole, l'impostazione di un ontouchstart
evento (anche se vuoto) indica esplicitamente al browser di reagire agli eventi di tocco.
Secondo me, questo è un comportamento imperfetto e probabilmente risale al tempo in cui il web "mobile" era praticamente inesistente (dai un'occhiata a quegli screenshot sulla pagina collegata per vedere cosa intendo), e tutto era orientato al mouse. È interessante notare che altri browser mobili più recenti, come su Android, visualizzano lo pseudo-stato `: active 'al tocco perfettamente, senza alcun hack come quello necessario per iOS.
(Nota a margine: se desideri utilizzare i tuoi stili personalizzati su iOS, puoi anche disabilitare la casella grigia traslucida predefinita che iOS utilizza al posto dello :active
pseudo-stato utilizzando la -webkit-tap-highlight-color
proprietà CSS, come spiegato nella stessa pagina collegata sopra .)
Dopo un po 'di sperimentazione, la soluzione prevista di impostare un ontouchstart
evento <body>
sull'elemento su cui tutti gli eventi di tocco si spostano poi non funziona completamente. Se l'elemento è visibile nella visualizzazione quando la pagina viene caricata, funziona correttamente, ma scorrere verso il basso e toccare un elemento che era fuori dalla visualizzazione non attiva lo :active
pseudo-stato come dovrebbe. Quindi, invece di
<!DOCTYPE html>
<html><body ontouchstart></body></html>
allegare l'evento a tutti gli elementi invece di fare affidamento sull'evento che ribolle nel corpo (usando jQuery):
$('body *').on('touchstart', function (){});
Tuttavia, non sono a conoscenza delle implicazioni sulle prestazioni di questo, quindi attenzione.
EDIT: C'è un grave difetto con questa soluzione: anche toccare un elemento durante lo scorrimento della pagina attiverà lo :active
stato pseudo. La sensibilità è troppo forte. Android risolve questo problema introducendo un piccolissimo ritardo prima che lo stato venga mostrato, che viene annullato se si scorre la pagina. Alla luce di ciò, suggerisco di utilizzarlo solo su elementi selezionati. Nel mio caso, sto sviluppando un'app Web da utilizzare sul campo che è fondamentalmente un elenco di pulsanti per navigare nelle pagine e inviare azioni. Poiché in alcuni casi l'intera pagina è composta da pulsanti, questo non funzionerà per me. Tuttavia, puoi impostare lo :hover
pseudo-stato per riempirlo. Dopo aver disabilitato la casella grigia predefinita, funziona perfettamente.
ontouchstart
senza=""
? (HTML5)