Android版Firefox中:active伪类异常滞留（疑似关联Google Maps）

问题描述 #

• 基于Angular 16搭建的网站，按钮通过:active伪类实现点击瞬间变暗、随后缓慢恢复原色的动画效果
• 该效果在桌面端Chrome、Android版Chrome中正常，但在Android版Firefox（含Nightly版本）中，点击按钮后会一直保持深色，:active伪类疑似滞留，仅点击其他区域后才恢复
• 复制MDN的:active示例到本站也会触发该问题，移除<head>中的Google Maps导入脚本后问题消失，但需保留该功能

解决方案 #

方案1：手动管理按钮激活状态（最可靠） #

通过JavaScript监听触摸/鼠标事件，用自定义类替代原生:active伪类，避免外部脚本干扰事件处理：

1. 修改CSS，替换:active为自定义类：

button {
  background-color: inherit;
  transition: all 1s;
}
button.active-state {
  filter: brightness(0.7);
  transition: all 0s;
}

2. 在Angular组件的模板中绑定事件：

<button 
  (touchstart)="addActiveState($event)"
  (touchend)="removeActiveState($event)"
  (mouseup)="removeActiveState($event)"
  (mouseleave)="removeActiveState($event)"
>
  按钮文本
</button>

3. 在组件类中实现状态控制方法：

addActiveState(event: Event): void {
  const target = event.target as HTMLElement;
  target.classList.add('active-state');
}

removeActiveState(event: Event): void {
  const target = event.target as HTMLElement;
  target.classList.remove('active-state');
}

方案2：设置body触摸行为属性（快速测试） #

添加CSS控制浏览器触摸事件处理逻辑，避免Google Maps脚本干扰:active状态的重置：

body {
  touch-action: auto;
}

方案3：强制重置:active状态（兼容补丁） #

在页面初始化后，监听全局触摸结束事件，延迟重置所有按钮的激活状态：

import { AfterViewInit, Component } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    document.addEventListener('touchend', () => {
      setTimeout(() => {
        document.querySelectorAll('button').forEach(btn => {
          btn.blur(); // 强制按钮失去焦点，触发:active状态移除
        });
      }, 100);
    }, { passive: true });
  }
}

内容的提问来源于stack exchange，提问作者elcye