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?

[Jeanlaris]

Hi @seanthepock,

On iOS Safari, buttons and custom clickable elements often retain a persistent tap highlight or focus state due to WebKit's default touch handling and touch-action behaviors.

To completely prevent inactive buttons from showing a stuck active/focus style on iOS, you need to combine the tap highlight color reset with explicit touch-action handling and clean up the active state override:

/* Remove iOS default tap highlight and persistent focus artifact */
button, .btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* Ensure inactive state doesn't retain active pseudo-classes on iOS touch */
.btn:not(.active):not(:hover):not(:focus) {
  background-color: initial;
  border-color: inherit;
}

[adydetra]

This happens because of iOS Safari's sticky :hover behavior on touch screens. When you tap the button, iOS triggers :hover and keeps it stuck until you tap somewhere else, so Bootstrap's hover background stays filled even after .active is removed.

You can fix this cleanly with CSS using @media (hover: none) so inactive buttons don't keep the hover background on touch devices:

@media (hover: none) {
  .btn:not(.active):hover,
  .btn:not(.active):focus {
    background-color: transparent !important;
    color: var(--bs-btn-color, inherit) !important;
  }
}

Or if you want to stick with JS, you can call blur() on pointerup instead of click. The race condition you ran into usually happens because click fires too late in the mobile touch cycle:

document.querySelectorAll('.btn').forEach((btn) => {
  btn.addEventListener('pointerup', () => btn.blur());
});