iOS16系统iPhone Safari浏览器中Z-index失效问题排查

问题说明 #

移动端通过JS给导航栏添加.navbar-mobile类实现全屏覆盖导航，该类已设置position: fixed、z-index: 999 !important，但在iOS16的iPhone Safari中导航栏始终被其他内容遮挡，无法显示在顶层。尝试过添加-webkit-transform: translate3d(0,0,0)，问题依旧，其他浏览器表现正常。

相关代码片段：

导航栏样式 #

.navbar-mobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  -webkit-transform: translate3d(0,0,0);
  z-index: 999 !important;
  -webkit-overflow-scrolling: auto !important;
  margin-top: 0;
}

Section 元素样式 #

section {
  transition: ease-in-out 0.3s;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 997;
  overflow-y: auto;
}

Body 及粒子容器代码 #

<body id="tsparticles"></body>

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
  z-index: -1;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width:100vw;
  height:100vh; 
}

#tsparticles {
  width: 100%;
  height: 100%;
  z-index: -1;
}

问题根源 #

1. Body 的 z-index 限制：当前 body 设置了z-index: -1，这会创建一个独立的层叠上下文，fixed 定位的导航栏作为 body 的子元素，会被限制在这个上下文内，即便设置更高的 z-index 也无法突破到顶层，这是 iOS Safari 特有的层叠上下文处理逻辑。
2. 3D 变换的兼容性：translate3d(0,0,0)在部分 iOS16 版本中可能无法触发预期的硬件加速层，导致导航栏的层叠优先级未被提升。

修复方案 #

方案1：移除 Body 的 z-index 设置 #

直接删掉 body 中的z-index: -1，避免创建限制导航栏的层叠上下文：

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
  /* 移除 z-index: -1 */
  -ms-overflow-style: none;
  scrollbar-width: none;
  width:100vw;
  height:100vh; 
}

方案2：用 translateZ(0) 强制硬件加速 #

将导航栏的-webkit-transform: translate3d(0,0,0)替换为translateZ(0)，更稳定地触发 iOS Safari 的硬件加速层，提升导航栏的层叠优先级：

.navbar-mobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 999 !important;
  -webkit-overflow-scrolling: auto !important;
  margin-top: 0;
}

方案3：调整粒子容器的定位方式 #

把粒子容器改为position: fixed，让它独立于 body 的层叠上下文，不影响导航栏：

#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

方案4：确保导航栏是 Body 的直接子元素 #

如果导航栏嵌套在其他设置了position: relative/absolute且带 z-index 的元素中，会被限制在父元素的层叠上下文里。把导航栏移到 body 下作为直接子元素，避免嵌套层级带来的影响。

测试建议 #

优先尝试方案1和方案2，这两个是解决 iOS Safari fixed 定位层叠问题最常见且有效的手段。如果问题仍存在，再依次尝试方案3和方案4。

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