Safari下自定义按钮z-index失效：是否为transform属性导致的兼容问题？

问题原因 #

该问题是Safari内核特有的堆叠上下文渲染逻辑导致的：当元素的伪元素使用了3D transform属性同时设置负z-index时，Safari不会将父元素的原生文本内容默认放置在更高堆叠层级，会被负层级的伪元素覆盖，而Chrome、Firefox的渲染逻辑会默认将文本放在更高层级，因此表现正常。

解决方案 #

方案1：最简适配（兼容iOS 15及以上版本）

无需修改原有结构，仅需给按钮公共样式新增isolation: isolate属性，主动为按钮创建独立堆叠上下文，保证伪元素的负z-index仅在按钮内部生效，文本默认展示在最上层：

.dark-button,
.light-button{
  position: relative;
  display: block;
  background: transparent;
  width: 280px;
  height: 48px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1.8px;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight:600;
  margin: 15px auto;
  font-family: Orbitron, Helvetica, sans-serif;
  /* 新增如下代码 */
  isolation: isolate;
}

方案2：全版本兼容（兼容所有iOS Safari版本）

如果需要适配iOS 15以下的老旧设备，可以通过包裹文本节点主动提升文字层级：

1. 修改HTML结构，给按钮内的文字套上span标签：

<a href="#" class="dark-button border"><span>Register</span></a>
<a href="#" class="light-button border"><span>Register</span></a>

2. 新增span的层级样式：

.dark-button span, .light-button span {
  position: relative;
  z-index: 2;
}

该方案无需调整原有伪元素的transform和z-index属性，不会改动按钮的现有视觉样式，兼容性最高。

内容的提问来源于stack exchange，提问作者A. Howard