CSSの「:active」はIE(Edge)で重い | Agnist.code

データテーブルなど要素が大量にある画面をIEで開いている時、スクロールが妙に重いので調査したところ、ボタンにかけていた擬似要素「:active」の存在が重くしていると分かりました。 「:active」の中のCSSプロパティではなく、「:active」の擬似要素がCSSに存在するだけで重くなっていました。 しかも最新のEdgeバージョンで。 経緯と状況 下記のデモページをIEで開いてみてください。 デモページ 重さを体感できるようにするため膨大な行のテーブルを overflow:scroll のレイヤーで囲ってますが、中身はどうでもいいです。 クリックしてからすぐスクロールしたり、スクロールバーのツマミからスクロールしようとすると一瞬引っかかると思います。これは「:active」が原因でIE内でCPU使用率が高まっているためです。 下図はIEのDevツールでUIの応答速度を計測したものです。