css flip doesn't work on i phone 8 safari

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;

}

I find this site very useful to check what different versions of browsers do support: https://caniuse.com just enter something like `backface-visibility` and it will tell you a lot. Also hover over the boxes to get more info. — KIKO Software, Jul 26 '18 at 07:22
To get a better change of useful answers read this: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Your code is just too complex at the moment, though it does work: http://jsfiddle.net/5u4ozvc8 Personally I think you're asking too much to want to have this working in all browsers. But that's just my opinion. — KIKO Software, Jul 26 '18 at 07:44
Thank you @KIKO Software for your responce! And thank you for the site, I didn't knew it and it is very usefull! :-) So there isn't a solution at all? — Black Widow, Jul 27 '18 at 06:55
To be honest: I haven't checked all your code to try to make it work on iOS. As I said: It is rather complex. What you could consider is something called "Graceful degradation", see: https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation — KIKO Software, Jul 27 '18 at 06:59

css flip doesn't work on i phone 8 safari

0 Answers0