iOS端Safari/Chrome中z-index失效问题排查与解决求助

问题原因 #

我之前也踩过iOS Safari这个z-index的坑，太闹心了！其实根源在于iOS上的Safari和Chrome（iOS所有第三方浏览器都用WebKit内核）对层叠上下文的处理有特殊规则：如果fixed定位的元素被包裹在一个已经创建了层叠上下文的父元素里——比如父元素设置了transform、filter、perspective、will-change，或是position: relative/absolute且z-index不为auto——那么这个fixed元素的z-index只会在父元素的层叠上下文范围内生效，根本突破不到全局上下文。

看你的代码，.photo-preview被放在<main>标签里，如果你的<main>或者它的某个上级元素有上述创建层叠上下文的属性，那.photo-preview的z-index:11就只能在<main>的上下文里生效；而.overlay是在<main>外面的全局上下文里，哪怕它的z-index是10，也会因为<main>的层叠层级低于全局，导致.overlay反而显示在.photo-preview上面。

解决方案 #

给你几个按优先级排序的可行办法：

1. 调整DOM结构，让.photo-preview与.overlay处于同一层级

这是最直接有效的方案，让两个fixed元素都处于全局层叠上下文，z-index就能正常对比：

<!-- 修改后的HTML结构 -->
<main>
  <!-- 原main内的内容 -->
</main>
<div class="photo-preview">
  <div class="btn-close-photo-preview">
    <div class="inner-btn-close-photo-preview">
      <i class="fal fa-times photo-preview-svg"></i>
    </div>
  </div>
  <img src="https://i.imgur.com/ruluJhL.jpg">
</div>
<div class="overlay" id="overlay"></div>

2. 确保父元素不创建额外的层叠上下文

如果没法修改DOM结构，就检查<main>和它所有父元素的CSS，移除会创建层叠上下文的属性：

• 删掉transform、filter、perspective、will-change这类属性
• 如果父元素是position: relative/absolute，把它的z-index设为auto（不要设具体数值）

3. 强制开启硬件加速（辅助修复）

如果上面的方法还没解决，可以给.photo-preview加一行CSS强制WebKit开启硬件加速，有时候能修复iOS的渲染层级bug：

.photo-preview {
  top: 0;
  left: 0;
  z-index: 11;
  height: 100vh;
  position: fixed;
  -webkit-transform: translateZ(0); /* 新增这行 */
  transform: translateZ(0);
}

验证效果 #

修改后，iOS上的Safari和Chrome应该就能和桌面、安卓端表现一致，图片与关闭按钮会正常显示在overlay上方。

内容的提问来源于stack exchange，提问作者dǝɥɔS ʇoıןןƎ