iOS端Chrome浏览器pointer-events从none切换为auto不生效问题

问题根因 #

iOS系统上的所有第三方浏览器（包括Chrome）均强制使用苹果WebKit内核，和PC、安卓端的Chromium内核行为差异很大，你遇到的问题来自两个WebKit的已知兼容问题：

1. 内联绑定在非交互元素（<p>）上的onclick事件会被提前注册到触摸事件队列，不会动态响应pointer-events的状态变更，导致显隐状态切换后点击逻辑不更新
2. WebKit对动态样式变更存在渲染缓存，pointer-events的修改不会主动触发重绘生效

修复方案 #

1. 重构HTML结构，分离结构与交互逻辑

不要在非交互元素上绑定点击事件，改用原生可交互的<a>标签承载跳转逻辑，移除内联onclick，用data-*属性存储对应的按钮索引，避免硬编码下标出错：

<p class="card-descr text-itx disabled">
  <a href="https://link.com/" target="_blank" rel="noopener noreferrer" class="link-target" data-btn-index="1">
    Some text here
  </a>
</p>

2. 调整CSS兼容逻辑

优先用visibility配合opacity控制显隐，比单独用pointer-events的iOS兼容性更好：

.disabled {
  cursor: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s opacity;
}
.disabled .link-target {
  pointer-events: none;
  touch-action: none;
}

.actv .disabled {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
}
.actv .disabled .link-target {
  pointer-events: auto;
  touch-action: manipulation;
}

3. 重写JS交互逻辑

用事件监听替代内联事件绑定，同时在切换按钮actv状态时主动触发重绘，清除WebKit的样式缓存：

// 绑定跳转逻辑
document.querySelectorAll('.link-target').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const btnIndex = parseInt(this.dataset.btnIndex);
    const targetBtn = document.getElementsByTagName('BUTTON').item(btnIndex);
    if (targetBtn.classList.contains('actv')) {
      targetBtn.classList.remove('actv');
      targetBtn.value = 0;
      targetBtn.blur();
      window.open(this.href, '_blank').focus();
    }
  });
});

// 你原有切换按钮激活状态的逻辑中，添加强制重绘代码
// 示例：假设是点击按钮切换激活状态
yourToggleBtn.addEventListener('click', function() {
  this.classList.toggle('actv');
  // 下面这行读取offsetHeight会强制触发浏览器重排，清除样式缓存
  this.offsetHeight;
});

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