擬似クラス：アクティブ、Bug in firefox？

Question

例は次のとおりです。私は、Firefox上のdiv内のアイコンを:active疑似クラス（タグ）をクリックエフェクトを適用するとhttps://codepen.io/anon/pen/zzrdmo

私はdiv要素をunclickとき、それは

...クリック保ち、理解していません

私は、疑似クラス:activeの相対位置を削除すると、これは正常に動作しますが効果がないことがわかります... この問題はFirefoxでのみ発生します... chrome、safariなどでうまくいきます。 誰かがなぜ知っていますか？

ありがとうございました。

EDIT：この質問に対する修正については、最初の回答で説明しています。 「しかし、あなたはまた、位置追加した場合：ホバー状態のルールに比べ（トップ設定せずに）、これは問題を修正する」 - @Johannes 感謝

Answer 1

:activeはながらの状態である - のリンクをクリックした後 - ブラウザまだ古いページが表示されますが、すでに新しいページまたはターゲットページをロードして開こうとしています。通常、新しいページの読み込みに時間がかかる場合を除き、この時間間隔は非常に短いため、ほとんど表示されません。そのため、active州では同じCSSがhoverになることがよくあります..

あなたの例では、ソースとターゲットのページは同じです - それはいくつかのページのリンクです。当然のことながら、異なるブラウザでは、activeのステータスに関して異なる処理をします。ある人はリンクを「新しいページが読み込まれた」と解釈し、他の人は「まだ古いページにいる」（したがってアクティブなままである）と解釈します...