CSS perspective伪元素在iOS端遮挡内容下半部分的解决方法

这是iOS Safari 3D变换场景下的经典渲染bug，触发逻辑非常明确：

• 给.btn设置perspective属性后，按钮会被创建为独立的3D渲染层
• 做翻转动画的::after伪元素设置了负z-index，Safari会错误计算普通流文本的z轴层级，把文本下半部分判定到伪元素的渲染平面后方，最终表现为文字只有上半部分可见
• 单独给文本套span提z-index无效的核心原因是：普通流内的文本节点没有生成独立的3D渲染层，z-index规则在3D上下文中不会按2D堆叠逻辑生效
• 你写在::after伪元素上的perspective属性属于冗余代码，该属性仅对元素的子级3D变换生效，设置在伪元素自身上没有任何作用。

二选一即可，全端兼容安卓、PC、iOS全版本系统：

方案1（推荐，改动最小） #

仅需给文本包裹一层span标签，强制让文本生成独立3D渲染层，同时调整伪元素z-index避免层级异常。
调整后DOM结构：

<div class="btn"><span>this is unreadable on ios?</span></div>

调整后完整CSS：

.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 12px 20px;
  margin: 10px 10px;
  text-decoration: none;
  -webkit-perspective: 500px;
  perspective: 500px;
  color: #fff;
  -webkit-transition: all .4s ease-in;
  transition: all .4s ease-in;
  z-index: 10;
  line-height: 20px;
  overflow: visible;
}

.btn span {
  position: relative;
  z-index: 2;
  /* 核心属性：强制文本在3D空间上浮，避开Safari层级计算bug */
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
}

.btn:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f00;
  border-radius: 12px;
  left: 0;
  /* 移除此处冗余的perspective属性 */
  -webkit-transform: translateY(-50%) rotateX(45deg);
  transform: translateY(-50%) rotateX(45deg);
  min-height: 20px;
  top: 50%;
  z-index: 1;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out
}

.btn:hover:after {
  color: #fff;
  -webkit-transform: translateY(-50%) rotateX(-135deg);
  transform: translateY(-50%) rotateX(-135deg);
  background-color: #000
}

方案2（无需额外标签） #

如果不想新增DOM节点，可以把按钮文本通过::before伪元素渲染，同样给该伪元素设置3D层级偏移即可，注意把原按钮的字体大小设为0隐藏原生文本，通过data-text属性传入按钮文案：
调整后DOM结构：

<div class="btn" data-text="this is unreadable on ios?"></div>

调整后CSS仅需在方案1的基础上新增如下代码，移除.btn下的span样式即可：

.btn {
  /* 原有样式保留，新增下面一行隐藏原生文本 */
  font-size: 0;
}
.btn::before {
  content: attr(data-text);
  position: relative;
  font-size: 16px; /* 替换为项目实际使用的字号 */
  z-index: 2;
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
}

避坑提示：不要尝试用overflow: hidden、强行拉高z-index的方式修复，前者会裁剪掉3D翻转动画的溢出部分，后者在Safari的3D渲染上下文中不会生效。

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