Flipping Card翻转卡片动画在iOS Safari浏览器运行异常如何修复

你遇到的Safari动画期间按钮裁剪问题主要来自4个可修复的配置错误，按优先级修改即可完全解决：

1. 错误的WebKit前缀写法
   你代码中--webkit-transform、--webkit-backface-visibility的前缀多写了1个横杠，变成了自定义CSS变量，Safari完全无法识别对应的3D变换规则，直接把所有双横杠的-webkit前缀改为单横杠即可。
2. perspective属性缺失单位
   你写的perspective: 1000没有带px单位，Chrome做了兼容处理但Safari要求必须明确长度单位，改为perspective: 1000px、-webkit-perspective: 1000px。
3. 父容器裁剪规则缺失
   Safari执行3D变换时会默认将变换容器的渲染边界限制为父容器尺寸，超出部分直接裁剪，给父容器.flipping-frame-container新增以下规则：

.flipping-frame-container {
  overflow: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

translate3d用于触发GPU独立渲染层，避免和内部变换容器共用渲染层导致的裁剪。
4. 按钮渲染层级优先级不足
按钮和翻转容器是同级元素，翻转容器执行3D变换时会临时抢占渲染层级，导致按钮被压在变换层下方被裁剪，给.flipper新增以下规则提升渲染优先级：

.flipper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

额外优化建议：你当前是给front、back两个元素分别加翻转变换，实际上直接翻转外层flip-container性能更好，也能减少Safari的多元素变换冲突，可把原有翻转规则替换为：

/* 删掉原有.is-flipped .front、.is-flipped .back的变换规则，替换为以下内容 */
.is-flipped {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.back {
  z-index: 1;
}

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