CSS rotateY属性在Safari浏览器中失效的问题求助

我之前碰到过一模一样的跨浏览器兼容性坑，问题根源在于Safari和Chrome对堆叠上下文的处理逻辑差异，尤其是元素使用transform时的表现。

问题分析 #

你的代码里，.parent::before用了transform: perspective(5px) rotateY(-2deg)，这个属性会强制元素创建一个独立的堆叠上下文。但.parent默认是静态定位（position: static），在Safari的渲染逻辑里，这种情况下.parent的子元素<p>及其伪元素p::before，层级会默认高于.parent::before——哪怕你给后者加了z-index: -1，这个负值只会让它在自己的堆叠上下文里降级，并不会影响父级静态元素下子元素的层级关系。这就是为什么Safari里图标会挡住红色方块一半，而Chrome里显示正常。

解决方案 #

只需要给.parent添加position: relative来创建统一的堆叠上下文，再调整伪元素的层级关系就行，有两种简单的实现方式：

方式一：明确层级关系

.parent {
    position: relative; /* 创建父级堆叠上下文，让所有伪元素的z-index都基于这里计算 */
}
.parent::before { 
    position: absolute; 
    content: ''; 
    width: 40px; 
    height: 40px; 
    background-color: red; 
    border-radius: 10px 0px 0px 10px; 
    transform: perspective(5px) rotateY(-2deg); 
    z-index: 0; /* 红色方块在父级上下文里处于底层 */
} 
p::before { 
    content: "\F1FC"; 
    color: black; 
    margin-left: 15px;
    position: relative;
    z-index: 1; /* 图标固定在红色方块上方 */
}

方式二：简化层级（更简洁）

因为绝对定位元素默认会处于静态定位子元素的下方，所以可以直接移除z-index: -1，再给.parent加相对定位：

.parent {
    position: relative;
}
.parent::before { 
    position: absolute; 
    content: ''; 
    width: 40px; 
    height: 40px; 
    background-color: red; 
    border-radius: 10px 0px 0px 10px; 
    transform: perspective(5px) rotateY(-2deg); 
    /* 移除z-index: -1，让它自动处于<p>的下方 */
} 
p::before { 
    content: "\F1FC"; 
    color: black; 
    margin-left: 15px;
}

这两种方式都能让红色方块和图标在Safari里的堆叠顺序和Chrome保持一致，完美解决遮挡问题。

内容的提问来源于stack exchange，提问作者Joey Yi Zhao