Next.js应用导航栏安卓正常iOS无法点击CSS问题排查求助

该问题是iOS Safari内核独有的渲染和事件处理特性导致的，和Next.js本身没有直接关联，核心原因有三个：

• iOS对带overflow-y: scroll属性的滚动容器有私有触摸事件优化，会默认提高该容器的触摸事件优先级，错误拦截本应落在导航栏上的点击事件，该逻辑和W3C标准事件流规则不一致
• 导航栏未触发独立合成层渲染时，即使设置了更高的z-index，iOS也会隐性将滚动容器的渲染层级置于导航栏之上，导致导航栏的交互区域被不可见的滚动容器区域覆盖
• height: 100%在iOS下的高度计算会忽略安全区域偏移、父节点高度基准异常，导致滚动容器的实际高度超出预设范围，顶部越界覆盖了导航栏的交互区域

• 用Mac端Safari连接iOS设备开启远程调试，选中导航栏元素，查看「图层」面板确认导航栏的交互响应区域是否被其他元素覆盖
• 临时给导航栏加background: rgba(255,0,0,0.5);，给滚动容器加background: rgba(0,0,255,0.5);，直接在iOS设备上观察两个元素的实际覆盖范围

按优先级依次尝试以下方案，任意方案生效即可：

1. 给滚动容器添加iOS专用滚动优化属性，修正事件拦截逻辑：

.your-scroll-container {
  -webkit-overflow-scrolling: touch;
}

2. 强制导航栏触发独立合成层，确保层级优先级高于滚动容器：

.navbar {
  transform: translateZ(0);
  /* 或者用 will-change: transform; 效果一致 */
  position: relative;
  z-index: 999; /* 确保z-index高于滚动容器 */
}

3. 修正滚动容器的高度计算，避免越界覆盖导航栏：
   如果导航栏固定高度为60px，将滚动容器的高度从100%改为：

.your-scroll-container {
  height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

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