iOS Safari下fixed定位元素z-index层级渲染异常如何解决？

问题描述 #

我现在有一个导航栏（navbar）和页脚（footer），二者均为fixed定位，且z-index均设置为1。
另有一个内部div需要覆盖在导航栏和页脚的上方，它同样为fixed定位，宽高分别为100vw和100vh，z-index设置为2。
上述代码在Chrome和Firefox浏览器中运行效果完全符合预期，但在iOS Safari浏览器中却出现导航栏和页脚层级高于该div的问题。请问该问题产生的原因是什么，有什么可行的解决方案？

Chrome运行效果（符合预期）：

iOS运行效果（出现异常）：

示例代码如下：

<html>
<style>
    html, body {
        margin: 0;
    }
    nav, footer, .overlay {
        position: fixed;
        width: 100vw;
    }
    nav, footer {
        z-index: 1;
        background-color: lightgreen;
        padding: 10px;
    }
    nav {
        top: 0;
    }
    footer {
        bottom: 0;
    }
    .overlay {
        z-index: 2;
        background-color: lightsalmon;
        height: 100vh;
        top: 0;
        left: 0;
    }
</style>
<body>
    <nav>NAV</nav>
        <div>
            <div class="overlay">
                DIV
            </div>
        </div>
        <footer>FOOTER</footer>
    </body>
</html>

问题原因 #

这是iOS Safari特有的层叠上下文兼容性bug导致的：
overlay元素嵌套在一个普通无定位的div父容器中，该父容器没有显式创建独立的层叠上下文。Chrome和Firefox会将固定定位的子元素的z-index放在全局层叠上下文中和其他元素比较，但iOS Safari会将嵌套的固定定位元素的层级绑定到其父元素的层级上。你代码里的父div是普通流元素，层叠顺序天然低于设置了z-index:1的nav和footer，因此即使overlay自身z-index设置为2，也无法超过父元素的层级上限，就会被导航栏和页脚覆盖。

解决方案 #

你可以根据实际场景选择以下任意一种方案：

• 方案1：调整DOM结构，把.overlay元素从父div中移出，和nav、footer作为同级元素，三者在同一个层叠上下文下比较z-index，即可正常生效。
• 方案2：如果不能修改DOM结构，给.overlay的父div显式创建层叠上下文并提高层级，比如添加样式：

  .overlay的父元素选择器 {
    position: relative;
    z-index: 2;
  }
  

  也可以使用isolation: isolate;属性创建层叠上下文，不需要修改定位属性。
• 方案3：给.overlay添加transform: translateZ(0);属性，强制触发硬件加速，让iOS Safari正确识别它的层级优先级。

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