div:active {
color: red;
}<div>test</div>In this trivial example, on Chrome, the element can be stuck in the :active state. Here’s a video: https://i.imgur.com/6GeQJlM.mp4
Even though my mouse has left the element, Chrome is still applying :active to it.
On desktop Chrome, it’s not a big deal, since :active styles get removed after I interact with the page. However, on Android Chrome, the :active style can persist until I refresh the page. I noticed that this issue often occurs when I switch apps right after tapping an element with :active. My hypothesis is that after switching back to Chrome, Chrome doesn’t check that the element is no longer in the :active state.
Is there a way to force browsers to recheck the :active state for every element? I’d do this when switching back to my web app, i.e. using visibilitychange.
I tried adding and removing display: none, document.activeElement.blur(), calling focus() on another element, adding tabindex, etc. The only thing that worked was removing and adding back the style, but that seems error-prone.