CSS backdrop-filter + backface-visibility не работает на iOS ⇐ IOS

[Anonymous]

Я создал флип-карту с текстовым содержимым на лицевой и оборотной сторонах.
Я применил размытие к карточке, но на iOS оно работает очень глючно.

Код: Выделить всё

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

Я поискал в Интернете и обнаружил похожие проблемы, но никто не использовал размытие

Код: Выделить всё

backface-visibility: hidden

Я искал и нашел похожие проблемы с backdrop-filter, но решения этих проблем заключались в применении -webkit-backdrop-filter, который я уже применил и в моем случае не работает.
Текст все время нечеткий, а при повороте карты размывается.


Фрагмент кода
(также на CodePen)

Код: Выделить всё

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

Код: Выделить всё

body {
margin: 0;
/*   background-color: green; */
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);
}

Код: Выделить всё

Front

Back

Подробнее здесь: https://stackoverflow.com/questions/783 ... ing-on-ios