问题描述

在之前写博客《CSS揭秘》读书笔记（二）：形状的过程中偶然发现这样一个问题：

在Safari中使用transform 3D变换可能会导致z-index渲染结果与Chrome中渲染结果不一致，考虑如下情况

1
2
3
4
<body>
  <div class="line"></div>
  <div class="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.line {
    position: fixed;
    margin-top: 45px;
    z-index: 100;
    width: 100%;
    height: 10px;
    background: red;
}
.box {
    position: absolute;
    left: 500px;
    width: 300px;
    height: 100px;
    background: lightblue;
    transform: perspective(50px) rotateY(5deg);
}

在Chrome浏览器中结果是

chrome-with-z-index

将z-index删掉后

chrome-without-z-index

但是在Safari中情况有所不同，无论是否保留z-index属性，结果唯一且与Chrome不同：

safari-transform

从这个对比可以看出，在3D transform变换中z-index属性的渲染在Chrome和Safari中有很大的不同，Safari似乎并不考虑这种情况下的z-index，而是采用更符合真实世界人眼观测视角的方法渲染元素

解决方法

可以对原本处于上层的元素设置做一个translateZ变换将其“抬高”

1
2
3
.line {
    transform: translateZ(100px);
}

safari-translateZ

参考：https://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/