css flip doesn't work on i phone 8 safari - ios

Question

I would like to ask about a problem I have.
I created flip boxes on a wordpress page and it works like a charm on mozilla, chrome.
I also tested on a mac and it flips normally but on ipad and iphone 8 it won't.
It won't flipp on the back div and shows letters from the front div reversed.
Can you please help me?
.flip-container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateY(180deg);
perspective: 1000px;
-webkit-perspective: 1000px;
}
.flip-container, .front, .back {
width: 100%;
height: auto;
min-height: 225px;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotate(0deg);
background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/prostatis_.jpg);
background-size: cover;
background-repeat: no-repeat;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
-o-transform: rotate(180deg);
background: hsla(0, 0%, 0%, 0.5);
perspective: 1000px;
-webkit-perspective: 1000px;
}
.page-id-988 .box,.page-id-1015 .box {
float: left;
display: inline;
margin: 2% 1%;
width: 23%;
height: auto;
perspective: 1000px;
-webkit-perspective: 1000px;
}
<div class="box"><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div style=" background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/diagnwstika-kentra.jpg);background-size: cover;
background-repeat: no-repeat;" class="front"><!-- front content --><p class="title"> test 1</p>
</div>
<div class="back">
<!-- back content --><p class="title">test 1 </p>
<ul><li>CA 19-9</li><li>CEA </li><li>PSA</li><li>FREE PSA</li></ul><p class="price">25,00 €</p>
</div>
</div>
</div></div>
<div class="box"><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/analysi-aimatos-gia-aimolipsia-b.jpg);background-size: cover;
background-repeat: no-repeat;" ><!-- front content --><p class="title">test 2 </p>
</div>
<div class="back">
<!-- back content --><p class="title">test 2 </p>
<ul><li>CA 15-3</li><li>CA 19-9</li><li>Ca-125</li><li>CEA</li></ul><p class="price">45,00 €</p>
</div>
</div>
</div></div>
I managed to make it show normally but when I click on the back side it doesn't rotate on the front. Can anyone please help me?
.flip-container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateY(180deg);
perspective: 1000px;
-webkit-perspective: 1000px;
}
.flip-container, .front, .back {
width: 100%;
height: auto;
min-height: 225px;
perspective: 1000px;
-webkit-perspective: 1000px;
width: 100%;
height: auto;
min-height: 225px;
transform: rotateY(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotateY(0deg);
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-o-transform: rotate(0deg);
background: url(http://ippokratis.typos.center/wp-content/uploads/2018/04/prostatis_.jpg);
background-size: cover;
background-repeat: no-repeat;
perspective: 1000px;
-webkit-perspective: 1000px;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
-o-transform: rotate(180deg);
background: hsla(0, 0%, 0%, 0.5);
perspective: 1000px;
-webkit-perspective: 1000px;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}