Enlever le layer noir au click event sur les appareils iOS

Sur iPad ou iPhone quand on click sur quoi que ce soit, on voit apparaître pendant environ une seconde un layer noir transparent par dessus l’élément html en question. C’est plutôt moche et ça donne l’impression de ralentir l’expérience utilisateur.

Pour s’en débarrasser il vous suffit d’appliquer cette propriété css sur les éléments qui vous intéressent :

a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

En gros ça dit que la couleur de -webkit-tap-highlight-color sur tous les <a> est noire (les 3 premiers zéros dans rgba) et que son opacité est à zéro. Donc en fait il est invisible. A noter que cette propriété ne sera interprétée que par les appareils iOS donc iPhone et iPad essentiellement.

Je vous conseille toutefois d’affiner le sélecteur css, il ne sert à rien d’être à ce point générique. Préférez quelque chose qui ressemblerait à ceci :

.btn, input, select, .navbar a,
.close-btn, .etcetera {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Remarque au passage, peut-être vous sera-t-il nécessaire de rajouter le !important à la fin de la déclaration si elle ne semble pas marcher.

Ressources

• Doc Apple officielle (vous y trouverez aussi moult propriétés css réservées à iOS)