我无法让卡片翻转在iOS上正常工作--我给所有东西都添加了网络工具包，但卡片在iOS上仍然不能正确翻转--第一张卡片会翻转并显示图片，但之后我只能看到白色的背景颜色。 有没有人有什么建议或者看到我做错了什么？

CSS

.grid{
     margin: 0 auto;
     width: 80vw;
     max-width: 60vh;
     height: 80vw;
     max-height: 80vh;
     font-size: 1rem;
     perspective: 1000px;
     -webkit-perspective: 1000px;

}

.row {
     display: flex;
}

.box {
     background: white;
     box-shadow: 0 0 10px;
     margin: 5px;
     color: white;
     font-weight: bold;
     flex: 1 0 auto;
     position: relative;
}

.box:after {
     content: "";
     float:left;
     display: block;
     padding-top: 100%;
}

.memory-card {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     transform: scale(1);
     transform-style: preserve-3d;
     transition-property: all; 
     transition-timing-function: linear;
     -webkit-tranform: scale(1);
     -webkit-transform-style: preserve-3d;
     -webkit-transition-property: all;
     -webkit-transition-timing-function: linear;
     box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.memory-card:active {
     transform: scale(0.97);
     transition: transform .2s;
     -webkit-transform: scale(0.97);
     -webkit-transition: -webkit-transform .2s;
}
.memory-card.flip {
     transform: rotateY(180deg) translate3d(0, 0, 0);
     -webkit-transform: rotateY(180deg) translate3d(0, 0, 0);      
}


img {
     width: 100%;
     height:auto;
}

.front-face, .back-face {
     width: 100%;
     height: 100%;
     padding: 5px;
     position: absolute;
     border-radius: 5px;
     opacity: 1;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
}

.front-face {
     transform: rotateY(180deg);
     transition-property: opacity;
     transition-timing-function: linear;
     -webkit-transform: rotateY(180deg); 
     -webkit-transition-property: opacity;
     -webkit-transition-timing-function: linear;
}