Vue+SCSS开发作品集时Safari下CSS transform rotate效果异常求助

解决思路 #

• 调整3D渲染相关属性的声明方式
  Safari对嵌套在transform属性内的perspective解析兼容性较差，建议给.card-container单独显式声明perspective属性，同时补充transform-style: preserve-3d开启3D空间渲染，可手动补充-webkit-前缀测试（部分旧版本SASS自动前缀工具会漏加3D相关属性的前缀）：

.card-container {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* 保留原有其他属性 */
}

后续transform属性里可以去掉重复的perspective(1000px)声明。

• 给aspect-ratio添加兼容回退
  旧版本Safari对aspect-ratio属性支持存在缺陷，容易导致容器高度计算错误，进而影响transform-origin的定位。可以用padding方案做兼容回退：

.card-container {
  aspect-ratio: 5/3;
  /* 兼容旧版Safari的固定比例回退 */
  @supports not (aspect-ratio: 5/3) {
    height: 0;
    padding-top: 60%; /* 3/5 = 60% */
  }
  /* 保留原有其他属性 */
}

• 优化动画触发逻辑，避免重排
  你当前hover状态同时修改margin-top和transform，前者会触发页面重排，Safari对同时触发重排+重绘的动画渲染容错率很低，建议把margin-top的偏移也改成transform的translateY实现，所有动画效果都放在transform属性内，只触发重绘不触发重排：

@media (min-width: 1101px) {
  &:hover {
    /* 去掉margin-top: 180px声明 */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(180px);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(180px);
  }
}

• 修复flex子元素的高度属性兼容问题
  Safari对flex子元素的min-content高度解析存在已知bug，你可以去掉.card的margin: auto和height: min-content，改为给父元素.card-container添加flex对齐属性实现居中：

.card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 保留原有其他属性 */
}
.card {
  /* 去掉margin: auto和height: min-content声明 */
  height: auto;
}

额外排查点 #

如果上述修改后还是有问题，可以手动给所有transform相关属性补充-webkit-前缀，同时添加will-change: transform属性告知浏览器提前优化该属性的渲染，降低动画卡顿或错乱的概率。

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