Pseudo classe: active, Bug dans firefox?

Question

L'exemple est: https://codepen.io/anon/pen/zzrdmo

Je ne comprends pas quand j'applique l'effet de clic avec :active sur l'icône pseudo-classe (tag) dans div sur firefox, quand je le div décocher, il continue cliqué ...

Je vois que lorsque je supprime la position relative dans la pseudo-clé :active, cela fonctionne bien mais sans effet ... Ce problème se produit uniquement dans firefox ... en chrome, safari, etc fonctionne très bien. quelqu'un sait pourquoi?

Merci.

EDIT: Le correctif pour cette question est expliqué dans la première réponse. « mais si vous ajoutez également position: relative (sans un cadre supérieur) à la règle de l'état de vol stationnaire, cela résout le problème » - @Johannes grâce

Answer 1

:active est l'état tout - après avoir cliqué sur un lien - le navigateur affiche toujours l'ancienne page, mais essaie déjà de charger et d'ouvrir la nouvelle/la page cible. Habituellement, à moins que le chargement de la nouvelle page ne dure longtemps, cet intervalle de temps est si court que vous le verrez à peine, ce qui explique que très souvent l'état active obtienne le même CSS que hover - ne faisant pas de différence visuelle entre eux

Dans votre exemple, la page source et la page cible sont les mêmes - il s'agit d'un lien de quelques pages. De toute évidence, différents navigateurs traitent différemment le statut active. Certains interprètent le lien comme "nouvelle page chargée", d'autres comme "toujours sur l'ancienne page" (et donc toujours actif) ...