Как я могу запретить неактивным кнопкам Bootstrap отображаться как активные, когда они находятся в фокусе на iOS ⇐ CSS

[Anonymous]

Я использую кнопки и прозрачные таблички в Bootstrap для фильтров на странице. Это прекрасно работает везде, кроме iOS, где, если пользователь нажмет кнопку, чтобы сделать ее неактивной, кнопка будет неактивной, но все равно будет выглядеть активной, пока пользователь не нажмет где-нибудь еще. Для ясности я говорю о заливке фона кнопки или таблетки, а не контура фокуса, что не вызывает хлопот. ИИ предложил мне использовать JavaScript Blur(), чтобы принудительно перерисовать кнопку, но здесь есть своя проблема: необходимо отслеживать состояние каждой кнопки в JavaScript, а не в CSS, чтобы кнопки, которые переключаются как активные, не перерисовывались как неактивные. Я пробовал проверять активный класс при клике и вызывать размытие только в том случае, если кнопка больше не имеет активного класса, но эта проверка не сработала, вероятно, из-за состояния гонки между удалением активного класса и проверкой класса.
Я также безуспешно пробовал этот CSS.

Код: Выделить всё

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

Есть ли лучшее решение?


Подробнее здесь: https://stackoverflow.com/questions/798 ... en-they-ar