iOS端CSS backdrop-filter与backface-visibility组合使用异常求助

我制作了一款正反面带有文本内容的翻转卡片，为卡片添加了模糊效果，但在iOS设备上表现出严重的卡顿问题。

应用的模糊代码如下：

.blur {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

我在网上搜索到类似问题，但未发现同时结合backface-visibility: hidden使用模糊的案例。针对backdrop-filter的相关问题，常见解决方案是添加-webkit-backdrop-filter前缀，而我已添加该前缀但问题仍未解决。

卡片文本时常显示不清晰，且在翻转过程中模糊效果异常，效果演示：

以下是完整代码片段：

HTML代码 #

<div class="container">
  <div class="card">
    <div class="card__face card__face--front blur">
      Front
    </div>
    <div class="card__face card__face--back blur">
      Back
    </div>
  </div>
</div>

CSS代码 #

body {
  margin: 0;
  background-image: url("https://i.natgeofe.com/n/c9107b46-78b1-4394-988d-53927646c72b/1095_4x3.jpg");
  background-size: cover;
}

.container {
  width: 80vw;
  height: 300px;
  perspective: 600px;
  margin: auto;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  backface-visibility: hidden;
  background: rgb(255, 255, 255, 0.6);
  color: #03446a;
  font-size: 2rem;
}

.card__face--front {
}

.card__face--back {
  transform: rotateY(180deg);
}

.blur {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

JavaScript代码 #

var card = document.querySelector(".card");
card.addEventListener("click", function () {
  card.classList.toggle("flipped");
});

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