Safari浏览器中perspective与transform组合使用时的渲染异常求助

我之前也碰到过Safari在处理3D变换时的这类兼容性问题，咱们一步步来解决它！

问题分析 #

Safari对CSS 3D变换的渲染逻辑和Chrome、Firefox略有不同，尤其是当伪元素依赖父元素的perspective属性实现3D效果时，很容易因为缺少明确的3D空间上下文或者渲染层优化不足，出现视觉异常。

解决方案（按优先级尝试） #

• 给父元素添加3D空间保留属性
  Safari需要明确告知要保留子元素的3D变换上下文，否则伪元素的rotateY效果可能不会按照预期的perspective渲染。修改你的.service-element CSS：

  .service-element {
    text-align: center;
    padding: 28px;
    perspective: 298px;
    position: absolute;
    padding-left: 56px;
    transition: all .5s ease-in-out;
    padding-bottom: 60px;
    padding-top: 60px;
    transform-style: preserve-3d; /* 添加这行 */
    -webkit-transform-style: preserve-3d; /* 兼容旧版Safari */
  }
  

• 给伪元素添加背面可见性控制
  有时候Safari会默认渲染元素的背面，导致出现重叠或异常阴影，加上这个属性不仅能隐藏背面，还能触发硬件加速，提升渲染稳定性：

  .service-element:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #ffffff;
    border: solid 0.5px #e3e0e0;
    border-radius: 24px;
    transition: all .5s ease-in-out;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
    backface-visibility: hidden; /* 添加 */
    -webkit-backface-visibility: hidden; /* 兼容旧版Safari */
  }
  

• 将perspective直接整合到伪元素的transform中
  如果上面两种方法都无效，可以把父元素的perspective属性移除，直接在伪元素的transform里使用perspective()函数，这样能让伪元素直接拥有3D空间上下文，避免父元素和伪元素之间的兼容性问题：

  .service-element {
    /* 移除原有perspective属性 */
    text-align: center;
    padding: 28px;
    position: absolute;
    padding-left: 56px;
    transition: all .5s ease-in-out;
    padding-bottom: 60px;
    padding-top: 60px;
  }
  .service-element:before {
    /* 原有属性 */
    -webkit-transform: perspective(298px) rotateY(-10deg); /* 整合perspective */
    transform: perspective(298px) rotateY(-10deg); /* 整合perspective */
  }
  

一般来说，第一个方案就能解决大部分Safari的3D渲染异常问题，你可以先尝试这个，不行再试后面的~

内容的提问来源于stack exchange，提问作者Yahya El-Gohary