transform翻转同时弹出弹窗，在iOS中闪烁

transform实现翻转效果同时弹出vant弹窗，在iOS中闪烁

问题：用transform实现一个翻牌效果：transform-style: preserve-3d;元素内的子元素transform: rotateY(180deg);，翻开再翻回去，这个过程中弹出vant弹窗，在iOS的safari浏览器中会出现闪烁

代码：

<template>
  <div class="cards">
    <div
      :class="`card ${cardIndex === index ? 'active' : ''}`"
      v-for="(i, index) in cards"
      :key="index"
    >
      <img class="back" :src="i" @click="flip(index)" />
      <img class="front" :src="frontImg" />
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
  	cardIndex: -1,
  	frontImg: "",
    cards: [
    	// ...一些卡片背景图
    ],
  }),
  methods: {
  	// 翻牌
    flip(i) {
      this.cardIndex = i; // 翻动i卡牌
      this.frontImg = "xxx";
      setTimeout(() => {
		this.cardIndex = -1; // 翻回去
		this.$emit('showPop') // 弹出vant弹框
	  }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.cards {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-between;
  // overflow: hidden;
  .card {
    width: 95px;
    height: 142px;
    transition: transform 1s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    &.active {
      transform: rotateY(-180deg);
    }
    .front,
    .back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      position: absolute;
      width: 95px;
      height: 142px;
    }
    .front {
      transform: rotateY(180deg);
    }
  }
}
</style>

尝试：-webkit-backface-visibility: hidden;、-webkit-transform-style: preserve-3d;、perspective: 500;都不行

解决：
方法一：翻牌结束后再弹窗

flip(i) {
  this.cardIndex = i;
  this.frontImg =
    "//means-static.luckyop.com/images/20220310/1ftpei5ho27u475aqkb8.png";
  setTimeout(() => {
    this.cardIndex = -1;
    setTimeout(() => {
      this.$emit("flip");
    }, 1000); // 动画执行时间1s，这里延迟1s再弹窗
  }, 1000);
},

方法二：overflow: hidden;

.cards {
	overflow: hidden;
	// ...
}