iOS移动端Chrome/Firefox浏览器首次点击汉堡菜单无响应求助

仅在iOS移动端的Chrome和Firefox浏览器中，首次点击汉堡菜单时无响应。

已尝试的排查操作 #

• 强制设置初始属性<input id="checkbox" type="checkbox" unchecked />
• 无法在模拟器中复现该问题
• 该问题不会在桌面端浏览器出现
• 已移除所有mouseleave/mouseenter事件

临时解决方案（Hack） #

方案1：绑定空触摸事件触发交互识别 #

给汉堡菜单容器添加一个空的touchend事件，让iOS浏览器能正确识别首次触摸操作：

const hamburger = document.querySelector('.hamburger-container');
hamburger.addEventListener('touchend', () => {});

方案2：预激活checkbox状态 #

页面加载完成后，手动切换一次checkbox的状态再恢复，提前激活交互逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const checkbox = document.getElementById('checkbox');
  // 临时切换状态再还原，不影响初始显示
  checkbox.checked = !checkbox.checked;
  checkbox.checked = !checkbox.checked;
});

方案3：CSS强制标记为可交互元素 #

给汉堡菜单元素添加触摸高亮样式（即使透明），让iOS浏览器判定其为可交互节点：

.hamburger-container {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

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