Safari中perspective在rotateY正向过渡失效、反向过渡正常的问题求助

你遇到的这个问题是Safari浏览器处理3D变换时的一个常见渲染 quirks，我之前也碰到过类似情况——当通过hover触发rotateY(180deg)的正向过渡时，父元素的perspective没有被正确关联到动画中，但反向过渡（取消hover）却能正常生效，而Firefox等其他浏览器则表现正常。

问题原因分析 #

Safari在处理初始状态无transform变换的元素时，对于首次触发的transform过渡，可能没有提前建立好父元素的perspective渲染上下文，导致透视效果在正向动画中丢失。

修复步骤 #

解决这个问题的核心是给需要变换的元素设置一个几乎不可见的初始transform值，让Safari在页面加载时就识别到该元素需要参与3D变换，从而正确关联父元素的perspective。修改后的SCSS代码如下：

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  -webkit-perspective: 150rem; // 补全webkit前缀，兼容旧版Safari

  &__side {
    background-color: orangered;
    color: white;
    font-size: 2rem;
    height: 50rem;
    transition: all .4s;
    // 添加初始微小旋转，触发Safari建立透视上下文
    transform: rotateY(0.001deg);
    -webkit-transform: rotateY(0.001deg);
  }

  &:hover &__side {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
}

修复逻辑说明 #

• rotateY(0.001deg)这个值非常小，肉眼完全无法察觉，但它能让Safari在初始状态就为元素创建3D渲染上下文，确保后续的hover过渡能正确应用父元素的perspective。
• 补全-webkit-前缀是为了兼容一些较旧版本的Safari，避免出现属性不识别的情况。

验证效果 #

修改后，你会发现Safari中无论是hover触发的正向旋转，还是取消hover的反向旋转，都能和Firefox一样正常显示透视效果了。

内容的提问来源于stack exchange，提问作者Mr.Yellow