iOS 16.4后移动端Safari及Chrome卡片翻转点击区域异常问题

问题根源 #

iOS 16.4之后，WebKit内核（涵盖移动端Safari及iOS平台的Chrome）调整了3D变换元素的命中测试逻辑。在iOS 16.2等旧版本中，浏览器对3D旋转元素的点击区域计算基于元素原始平面边界盒；而iOS 16.4起，WebKit改为严格按照3D空间内元素的实际投影区域判定可点击范围。

当你的双面卡片以transform-origin: center为原点绕Y轴旋转后，背面元素在3D空间中的投影边界计算出现偏差，最终导致仅一半区域能触发点击事件——这和你推测的旋转原点相关问题完全吻合。

可行修复方案 #

• 确保卡片容器3D上下文完整：给父元素明确设置transform-style: preserve-3d，避免浏览器扁平化3D层级导致命中测试失效。
• 强制扩展背面元素点击区域：给背面元素添加覆盖整个卡片尺寸的透明伪元素，示例代码：

  .card-back::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
  

• 调整旋转实现逻辑：将旋转动作从卡片本身转移到容器上，让正反两面元素始终保持平面状态，通过容器旋转实现翻转动画，以此规避3D投影带来的点击区域计算偏差。

补充说明 #

iOS平台的Chrome、Edge等浏览器均基于WebKit内核，因此WebKit的这次变更会同步影响这些浏览器的表现。

内容的提问来源于stack exchange，提问作者Darrel van Onselen