How can I prevent inactive Bootstrap buttons from showing as active when they are in focus on iOS?

[seanthegeek]

I'm using buttons and transparent pills in Bootstrap for filters on a page. This works great everywhere except iOS, where if a user taps on a button to make it inactive, the button will be inactive but will still appear to be active until the user taps somewhere else. For clarity, I'm talking about the button or pill background being filled, not the focus outline, which is not bothersome. AI has suggested that I use JavaScript blur() to force rpainting of the button, but that has its own issue of needing to keep track of each button state in JavaScript rather than CSS so that buttons that are toggled as active don't get repainted as inactive. I've tried checking for the active class on click, and only calling blur if the button no longer has the active class, but that check didn't work, likely because of a race condition between removing the active class, and checking for the class.

I have also tried this CSS without success.

button, .btn {
    -webkit-tap-highlight-color: transparent !important; /* Prevent iOS highlight */
    touch-action: manipulation !important; /* Prevent unintended active effects */
}

Is there a better solution?